Dziwne zachowanie zegarka Angulara $ watch

Question

Dzisiaj spotykam się z naprawdę dziwnym zachowaniem w AngularJS przy użyciu funkcji $ watch. I uproszczone mojego kodu na poniższym przykładzie:

https://jsfiddle.net/yLeLuard/

Przykład ten zawiera usługę, która będzie śledzić zmiennej state. Dyrektywy są używane do wiązania zdarzenia kliknięcia z DOM zmieniając zmienną state za pośrednictwem usługi.

Istnieją dwa problemy w tym przykładzie:

1. Pierwszy przycisk zamykania (właściwość ng kliknij na nim) zmienia tylko stan na drugim kliknięciem
2. dwa przyciski bez ng- kliknięcie nie zmieniają stanu wcale

main.html

<div ng-controller="main"> 
    State: {{ api.isOpen | json }} 
    <div ng-click="" open> 
    <button>Open - Working fine</button> 
    </div> 
    <div ng-click="" close> 
    <button>Close - Works, but only on second click</button> 
    </div> 
    <div open> 
    <button>Open - Not Working</button> 
    </div> 
    <div close> 
    <button>Close - Not Working</button> 
    </div> 
</div> 

main.js

var myApp = angular.module('myApp', []); 

myApp.controller('main', ['$scope', 'state', function($scope, state) { 
    $scope.api = state; 

    $scope.api.isOpen = false; 

    $scope.$watch('api.isOpen', function() { 
    console.log('state has changed'); 
    }); 
}]); 

myApp.directive('open', ['state', function(state) { 
    return { 
    restrict: 'A', 
    scope: {}, 
    replace: true, 
    template: '<button>Open</button>', 
    link: function(scope, element) { 
     element.on('click', function() { 
     state.isOpen = true; 
     }); 
    } 
    }; 
}]); 


myApp.directive('close', ['state', function(state) { 
    return { 
    restrict: 'A', 
    scope: {}, 
    replace: true, 
    template: '<button>Close</button>', 
    link: function(scope, element) { 
     element.on('click', function() { 
     state.isOpen = false; 
     }); 
    } 
    }; 
}]); 

myApp.service('state', function() { 
    return { 
    isOpen: null 
    }; 
}); 

Answer 1

To dlatego, że używasz natywną detektor zdarzeń na click. To wydarzenie jest asynchroniczne i poza cyklem kodowania Angular, więc musisz ręcznie przetrawić zakres.

myApp.directive('open', ['state', function(state) { 
    return { 
    restrict: 'A', 
    scope: {}, 
    link: function(scope, element) { 
     element.on('click', function() { 
     scope.$apply(function() { 
      state.isOpen = true; 
     }); 
     }); 
    } 
    }; 
}]); 

Fixed skrzypce: https://jsfiddle.net/7h95ct1y/

Proponuję zmianę stanu bezpośrednio w ng kliknij: ng-click="api.isOpen = true"

Answer 2

Należy umieścić swoją funkcję łącza jako funkcja pre-link, to rozwiązuje problem drugiego kliknięcia.

https://jsfiddle.net/2c9pv4xm/

myApp.directive('close', ['state', function(state) { 
    return { 
    restrict: 'A', 
    scope: {}, 
    link:{ 
    pre: function(scope, element) { 
     element.on('click', function() { 
     state.isOpen = false; 
     console.log('click', state); 
     }); 
    } 
    } 
    }; 
}]); 

Co do części nie działa, jesteś oddanie dyrektywy na div, więc po kliknięciu na div to działa, ale nie na przycisk. Twoja otwarta dyrektywa powinna znajdować się na przycisku.

Edycja: inni komentatorzy sugerowali, aby zmienić stan bezpośrednio w ng-click. Nie polecałbym tego, może to zadziałać w tym przypadku, ale jeśli jesteś zobowiązany do wykonania więcej niż przypisania, nie jest to możliwe.