Merkwürdiges Verhalten von Angulars $ watch

Question

Heute treffe ich ein wirklich seltsames Verhalten in AngularJS mit $ watch. Ich vereinfachte meinen Code auf das folgende Beispiel:

https://jsfiddle.net/yLeLuard/

Dieses Beispiel enthält einen Dienst, die Spur eines state variabel halten. Die Anweisungen werden verwendet, um ein Klickereignis an das DOM zu binden, wobei die Variable state über den Service geändert wird.

Es gibt zwei Probleme in diesem Beispiel:

1. Die erste Schließen-Schaltfläche (mit ng Sie auf Eigenschaft auf sie) ändert nur den Zustand auf dem zweiten Klick
2. Die beiden Tasten ohne ng- Klick ändern sich nicht um den Zustand an allen

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

Das ist, weil Sie einen native Ereignis-Listener auf click verwenden. Dieses Ereignis ist asynchron und liegt außerhalb des Angular-Digest-Zyklus. Daher müssen Sie den Bereich manuell verdauen.

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

Fest Geige: https://jsfiddle.net/7h95ct1y/

würde ich vorschlagen, den Zustand direkt in die sich wandelnde ng Klick: ng-click="api.isOpen = true"

Answer 2

Sie Ihre Link-Funktion als Pre-Link-Funktion setzen sollte, dies löst das Problem des zweiten Klicks.

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

Was die nicht Arbeitsteil, setzen sind Sie Ihre Richtlinie über die div, so dass, wenn Sie auf dem div funktioniert es klicken, aber nicht auf die Schaltfläche. Ihre offene Anweisung sollte auf der Schaltfläche sein.

Edit: andere Kommentatoren vorgeschlagen, dass Sie den Status direkt in der ng-Klick ändern. Ich würde es nicht empfehlen, es könnte in diesem Fall funktionieren, aber wenn Sie verpflichtet sind, mehr als eine Zuweisung zu tun, ist es nicht lebensfähig.