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

问题描述

我是pretty知道我在做的，因为我有角的小经验，有些不妥。
也许答案已经在计算器显山露水，我不要求（谷歌搜索）正确的问题。

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.

我有这样的pretty简单的指令。它只是一个带有四个州跨度，我想改变的跨度每次点击。
每次点击进步的状态前进，然后循环返回。每个州都有不同的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再次闪光等于点击前的值。

我觉得这是一件有脏检查，并于母公司控制的模型的连接做的，但那么，什么是这样做的正确的角方法是什么？和/或没有获得相同的结果更好，更angulary，方式是什么？

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

>>小提琴＆LT;＆LT;

推荐答案

这是因为你看在你的$ 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不是我的第一语言，简短的回答很抱歉）

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

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