Question

以下是我的代码：

"use strict";

var App = angular.module('SampleApp', []);

App.controller('EmpCtrl', ['$scope', 'EmpCalcSvc', function ($scope, EmpCalcSvc) {
    $scope.Empno = 1001;
    $scope.Ename = "Test";
    $scope.Sal = 4500;
    $scope.Deptno = 20;
    $scope.GetAnnSal = function () {
        return EmpCalcSvc.GetAnnSal($scope.Sal);
    };
}]);

App.service('EmpCalcSvc', function() {
    this.GetAnnSal = function (salary) {
        console.log(salary);
        return salary * 12;
    };
});

<html ng-app="SampleApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
    <div ng-controller="EmpCtrl">
        <table>
            <tr>
                <td width="150px">Employee Id:</td>
                <td>{{Empno}}</td>
            </tr>
            <tr>
                <td>Name:</td>
                <td>{{Ename}}</td>
            </tr>
            <tr>
                <td>Salary:</td>
                <td><input type="text" ng-model="Sal"/></td>
            </tr>
            <tr>
                <td>Department:</td>
                <td>{{Deptno}}</td>
            </tr>
            <tr>
                <td>Annual Salary:</td>
                <td>{{GetAnnSal()}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

如果我修改了文本框中的值，$ scope.GetAnnSal会被执行三次！

我在这里错过了一次只执行一次？或者，我在理解这个概念时从根本上是错误的吗？

提前感谢。

Answer 1

问题出在<td>{{GetAnnSal()}}</td>行。 Angular将在每个摘要周期中执行此功能。最好将范围变量放在插值中而不是函数中。

检查plunker。我在函数中调用GetAnnSal（）的函数调用ng-change并在interpolation指令中设置求值。

Answer 2

进行简单的改变，你就完成了。无需在td中调用该函数，因为它将被观看。

＆＃13;

"use strict";

var App = angular.module('SampleApp', []);

App.controller('EmpCtrl', ['$scope', 'EmpCalcSvc', function ($scope, EmpCalcSvc) {
    $scope.Empno = 1001;
    $scope.Ename = "Test";
    $scope.Sal = 4500;
    $scope.Deptno = 20;
    $scope.GetAnnSal = function () {
        $scope.computedSalary = EmpCalcSvc.GetAnnSal($scope.Sal);
        //return EmpCalcSvc.GetAnnSal($scope.Sal);
    };
}]);

App.service('EmpCalcSvc', function() {
    this.GetAnnSal = function (salary) {
        console.log(salary);
        return salary * 12;
    };
});

＆＃13;

<html ng-app="SampleApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
    <div ng-controller="EmpCtrl">
        <table>
            <tr>
                <td width="150px">Employee Id:</td>
                <td>{{Empno}}</td>
            </tr>
            <tr>
                <td>Name:</td>
                <td>{{Ename}}</td>
            </tr>
            <tr>
                <td>Salary:</td>
                <td><input type="text" ng-model="Sal" ng-change="GetAnnSal(Sal)"/></td>
            </tr>
            <tr>
                <td>Department:</td>
                <td>{{Deptno}}</td>
            </tr>
            <tr>
                <td>Annual Salary:</td>
                <td>{{computedSalary}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

＆＃13;

为什么$ scope成员被访问三次

2 个答案: