Chapter 19, $interpolate (Pro AngularJS)

by js_test

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<body ng-app="exampleApp" ng-controller="defaultCtrl">
    <div class="well">
        <p>
            <input class="form-control" ng-model="dataValue" />
        </p>
        <div>
<span eval-expression amount="dataValue" tax="10"></span>

        </div>
    </div>
</body>

JavaScript

var exampleApp = angular.module("exampleApp", []);

exampleApp.controller("defaultCtrl", function ($scope) {
    $scope.price = "100.23";
})

exampleApp.directive("evalExpression", function ($interpolate) {
    var interpolationFn = $interpolate("The total is: {{amount | currency}} (including tax)");

    return {
        scope: {
            amount: "=amount",
            tax: "=tax"
        },
        link: function (scope, element, attrs) {
            scope.$watch("amount", function (newValue) {
                var localData = {
                    total: Number(newValue) + (Number(newValue) * (Number(scope.tax) / 100))
                }
                element.text(interpolationFn(scope));
            });
        }
    }
});