1

angularの経験がほとんどないため、何か間違ったことをしていると確信しています。おそらく答えはすでにstackoverflowのどこかにあり、私は正しい質問をしていません（グーグル）。

私はこの非常に単純なディレクティブを持っています。スパンをクリックするたびに変更したいのは、4 つの状態を持つ単なるスパンです。クリックするたびに、状態が順方向に進み、ループバックします。州ごとに異なる CSS クラスがあります。ディレクティブの値が変更されるたびに、親モデルで値を変更したい (したがって、isolate スコープ宣言の "=" ですよね?)。

クラスを変更する値にウォッチを付けて、値が変更されるたびに css クラスが更新されるようにします。

さて、問題は、クリックするとウォッチが newValue で起動されますが、その後、クリック前の値に等しい newValue でウォッチが再び起動することです。

これは、親コントローラーのダーティチェックとモデルへの接続に関係していると思いますが、これを行う正しい角度の方法は何ですか? および/または同じ結果を得るためのより良い、より角度のある方法はありますか?

ここでディレクティブ：

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

こちら>>フィドル<<

4

3 に答える 3

3

変更を監視するためにプリミティブ値を使用しないでください。これは、javascript の子スコープでのプロトタイプの継承により、親スコープの値が上書きされるためです。すべての理由を説明している非常に優れた記事を参照してください。 https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance

于 2013-04-04T11:28:37.427 に答える
3

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

Try this in controller

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

and then in view:

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

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

于 2013-04-04T11:05:58.947 に答える