Question

在angularjs中，我用两个输入制作了这个简单的例子。我希望将输入的背景颜色更改为绿色，如果其值等于“绿色”。这个例子有效，（如果输入的值等于'green'，它会改变输入的背景），但是我注意到（使用js控制台）当我更改两个输入angularjs调用中的任何一个时的值（两个）检查值是否等于'绿色'的函数。

<div ng-app="myApp">
    <div ng-controller="myController">
        <my-input identifier="id1" />
    </div>
    <div ng-controller="myController">
        <my-input identifier="id2" />
    </div>
</div>



angular.module('myApp', []).directive('myInput', function() {
    return {
        restrict: 'E',
        scope: {
            identifier: '='
        },
        template: '<input type="text" ng-class="{greenBackground: identifier.checkIfGreen()}" ng-model="identifier.value"/>'
    };
}).controller('myController', ['$scope',

    function($scope) {
        $scope.id1 = {
            value: '',
            checkIfGreen: function() {
                console.log('First value checked');
                return this.value == 'green'
            }
        }
        $scope.id2 = {
            value: '',
            checkIfGreen: function() {
                console.log('Second value checked');
                return this.value == 'green'
            }
        }

    }
]);

为什么会这样？如果我只是改变第一个输入的值，有没有办法避免调用检查第二个输入是否等于'绿色'。

Fiddle

注意：这只是一个例子，我知道有更好的方法来获得这种简单的行为。

Answer 1

因为如果发生任何模型更改，将针对每个摘要周期评估ng-class中的函数。由于页面中定义了2个ng-class，因此每次进行模型更改时都会评估checkIfGreen()个。{/ p>

使用ng-change来调用函数并将返回的值赋给临时变量，如下所示：

template: '<input type="text" 
                  ng-class="{greenBackground: flag}" 
                  ng-change="flag=identifier.checkIfGreen()" 
                  ng-model="identifier.value"/>'

演示：http://jsfiddle.net/pvrcy5cL/

当模型在指令的其他实例中更改时检查函数？

1 个答案: