Jestem pewien, że robię coś złego z powodu mojego małego doświadczenia z kanciastością. Prawdopodobnie odpowiedź jest już gdzieś w stackoverflow i nie pytam (googling) o właściwe pytania.

Mam bardzo prostą dyrektywę. To tylko rozpiętość z czterema stanami, które chcę zmienić przy każdym kliknięciu na zakres. Każde kliknięcie przesuwa stan do przodu, a następnie powraca. Każdy stan ma inną klasę css. Chcę, aby wartości były zmieniane w modelu nadrzędnym za każdym razem, gdy zmieniła się wartość dyrektywy (stąd „=” w deklaracji zakresu izolatu, prawda?).

Położyłem zegarek na wartości, aby zmienić klasę, tak aby klasa css była aktualizowana za każdym razem, gdy zmienia się wartość.

Problem polega na tym, że gdy klikam, zegarek jest uruchamiany z newValue, ale zegarek ponownie uruchamia się z wartością newValue równą wartości przed kliknięciem.

Myślę, że jest to coś, co ma związek z brudnym sprawdzaniem i połączeniem z modelem kontrolera nadrzędnego, ale w takim razie, jaki jest właściwy kątowy sposób na to? I / lub czy istnieje lepszy, bardziej angularny sposób na uzyskanie tego samego wyniku?

tutaj dyrektywa:

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

tutaj>> skrzypce <<