$ watch不会在指令中触发

Question

In my controller, I set a variable to be true with ng-click .

In my directive, I need to evaluate something when the variable is true. Subsequently, I set the variable to be false through my directive.

However my problem is that I cannot seem to get the $watch to fire from the ng-click function.

I've included a sample fiddle of my problem. As you can see, $watch initially logs true in the console on loading the page. When I click the directive to make it false , $watch also fires and logs false . However subsequent clicks to the button with ng-click do not result in $watch firing. Why is this?

http://jsfiddle.net/zcouyvwc/2/

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

function MyCtrl($scope,$timeout) {

    $scope.boolean = true;

    $scope.setToTrue = function() {
        $timeout(function(){$scope.boolean = true;});
    };
}


app.directive("someDirective",['$timeout',function($timeout) {
return {
    restrict:"A",
    scope:true,
    link: function(scope, element, attrs) {

        scope.$watch("boolean", function() {
         console.log(scope.boolean);
        });

        element.bind('click',function(){
            $timeout(function(){
                scope.boolean = false;
            });

        });
    }
}
}]);

Answer 1

The issue is that someDirective is creating a child scope, and when it sets scope.boolean = false , it actually creates a variable that shadows the original, so the original is unchanged

The standard advice, as from https://github.com/angular/angular.js/wiki/Understanding-Scopes , is

This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models

If you change your code so that you have

$scope.model = {
    boolean: true
};

As in http://jsfiddle.net/9j87njvt/1/ , then I think it will behave as expected.

---

As a sidebar, I usually only create directives that depend on scope inheritance in this way if alternatives are more complicated or have some other disadvantage. Usually I pass in options via attributes, and use scope: {...} in the directive definition for an isolated scope, which keeps things more separate. Also, I'm not sure why you have $timeout s in a few places. You might be looking to use scope.$apply() in order for Angular to run the digest cycle to notice changes in the model.

Answer 2

You are a victim of prototypical scope inheritance. You see, specifying scope:true means that the directive creates a new scope that prototypically inherits the parent scope (that of the controller). (Search for Javascript prototypical inheritance if you are not familiar with the concept.)

Take a small break and specify scope:false , meaning the directive uses the parent scope. Your fiddle works. So, if you have no specific reason to have a child scope, you are done.

If not, read on: The characteristic with prototypical scope inheritance is that top level properties (ie $scope.something - in contrast to $scope.something.deeper → something is top level, deeper is not) get read from the first scope in hierarchy that contains them, but get written always to the current scope. At the beginning, the scope hierarchy is:

controller scope (contains "boolean" top level prop, value: true)
|
+- directive child scope (contains nothing)

After clicking the situation becomes:

controller scope (contains "boolean" top level prop, value: true)
|
+- directive child scope (contains "boolean" top level prop, value: false)

The watch is placed on the directive scope, so reads the boolean property from the child scope; in which case it is always false and the watch never triggers.

The answer is to use non-top-level properties. Place boolean under an object in the controller scope, ie $scope.data.boolean = true and similarily adapt the directive:

scope.$watch("data.boolean", function() { ... });

element.bind('click',function(){
    scope.$apply(function() {
        scope.data.boolean = false;
    ...

While you're at it, give boolean a better name! (see answer from developer10)

And use $scope.$apply like above instead of $timeout .

Answer 3

You should be aware that boolean is a reserved word in many (all) programming languages and as such may not be used for naming purposes.

Reserved names

First try giving another, meaningful name to your variable and then update us if it still doesn't work.