在指令中， $watch 触发两次，将 newValue 恢复为原始的 $watch 触发值 [英] in a directive, $watch fires two times reverting newValue to the original pre $watch firing value

问题描述

我很确定我做错了什么，因为我对 angular 的经验很少.可能答案已经在 stackoverflow 中的某个地方了，我不是在问(谷歌搜索)正确的问题.

I'm pretty sure I'm doing something wrong because of my little experience with angular. Probably the answer is already somewhere in stackoverflow, and I'm not asking (googling) the right questions.

我有一个非常简单的指令.这只是一个具有四个状态的跨度，我想在跨度上的每次点击时更改.每次点击都会向前推进状态，然后循环返回.每个州都有不同的 css 类.我希望每次指令的值更改时父模型上的值都更改(因此在隔离范围声明中使用="，对吗?).

I have this pretty simple directive. It's just a span with four states, that I want to change on every click on the span. Every click progresses the state forward and then loops back. Every state has a different css class. I want the values changed on the parent model everytime the value of the directive changed (hence the "=" in the isolate scope declaration, right?).

我在值上放了个表来改变类，这样每次值改变时css类都会更新.

I put a watch on the value to change the class, so that the css class is updated every time the value changes.

现在，问题是当我点击时，手表会以 newValue 触发，但随后手表会再次以 newValue 等于点击前的值触发.

我认为这与脏检查和与父控制器模型的连接有关，但是，这样做的正确角度方式是什么?和/或有更好、更有棱角的方式来获得相同的结果?

I think this is something that has to do with dirty checking and the connection to model of the parent controller, but then, what is correct angular way of doing this? And/or there is a better, more angulary, way of obtaining the same result?

这里的指令:

.directive('square', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope : {
            value : '=',
        },
        link: function(scope, elm, attrs, ctrl) {

            scope.valueToClass = function(value) {
                var result = 'square-empty';
                    if (value == '1') {
                        result = 'square-temp';
                    } else if (value == '2') {
                        result = 'square-confirmed';
                    } else if (value == '3') {
                        result = 'square-critical';
                    }
                return 'block-'+result;
            }

            scope.$watch('value', function(newValue, oldValue) {
                scope.blockClass = scope.valueToClass(newValue)

            }, true);

        },
        controller: function($scope, $element, $attrs) {
            $scope.changeValue = function() {
                $scope.value = ($scope.value+1) % 4;
            }
        },
        template : '<span class="{{blockClass}}"  ng-click="changeValue();">'+'</span>',
        replace: true
    };
});

这里>>小提琴<<<

推荐答案

这是因为您要注意 $scope.block 数组的原始值(整数)的变化.

It is because you watching for changes in primitive values (integers) of your $scope.block array.

在控制器中试试这个

 $scope.block = [{value: 3}, {value: 2}, {value: 1}, {value: 0}];

然后在视图中:

<square ng-repeat="squareValue in block" value="squareValue.value"></square>

(英语不是我的母语，抱歉回答太短)

(Englsh isn't my first language, so sorry for the short answer)

这篇关于在指令中， $watch 触发两次，将 newValue 恢复为原始的 $watch 触发值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！