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

Why does the $scope member being accessed thrice

本文关键字：三次 访问 scope 成员 为什么      更新时间：2023-09-26

以下是我的代码：

"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被处决三次！

我在这里错过了什么来让它只执行一次？
或者，我对这里的概念的理解是根本错误的吗？

提前谢谢。

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

检查这个跳槽。我将函数调用 GetAnnSal（） 放在 ng-change 中并在插值指令中设置评估值的地方。

做一个简单的ng-change，你就完成了。无需在 td 中调用该函数，因为它将被$watched。

"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;
    };
});
<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>

相关文章：