Ich bin mir ziemlich sicher, dass ich etwas falsch mache, weil ich wenig Erfahrung mit Angular habe. Wahrscheinlich ist die Antwort bereits irgendwo im Stapelüberlauf und ich stelle nicht die richtigen Fragen (google).

Ich habe diese ziemlich einfache Anweisung. Es ist nur eine Spanne mit vier Zuständen, die ich bei jedem Klick auf die Spanne ändern möchte. Mit jedem Klick wird der Status vorwärts und dann zurückgeschleift. Jeder Staat hat eine andere CSS-Klasse. Ich möchte, dass die Werte im übergeordneten Modell jedes Mal geändert werden, wenn sich der Wert der Direktive ändert (daher das "=" in der Isolate-Scope-Deklaration, richtig?).

Ich habe den Wert überwacht, um die Klasse zu ändern, sodass die CSS-Klasse jedes Mal aktualisiert wird, wenn sich der Wert ändert.

Das Problem besteht nun darin, dass beim Klicken die Uhr mit dem neuen Wert ausgelöst wird. Anschließend wird die Uhr erneut mit dem neuen Wert ausgelöst, der dem Wert vor dem Klicken entspricht.

Ich denke, das hat etwas mit Dirty Checking und der Verbindung zum Modell des übergeordneten Controllers zu tun, aber was ist dann die richtige Winkelmethode, um dies zu tun? Und / oder gibt es eine bessere, genauere Methode, um das gleiche Ergebnis zu erzielen?

hier die richtlinie:

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

Hier>> die Geige <<