为什么$ watch里的listener函数没有被解雇？

Question

我有这个下拉菜单多选指令：

JavaScript端：

'use strict'; 
 

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

 
app.controller('AppCtrl', function($scope){      
 
    $scope.roles = [ 
 
      {"id": 1, "name": "Manager", "assignable": true}, 
 
      {"id": 2, "name": "Developer", "assignable": true}, 
 
      {"id": 3, "name": "Reporter", "assignable": true} 
 
    ]; 
 
    
 
    $scope.member = {roles: []}; 
 
    $scope.selected_items = []; 
 
}); 
 

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

 
app_directives.directive('dropdownMultiselect', function(){ 
 
    return { 
 
     restrict: 'E', 
 
     scope:{   
 
      model: '=', 
 
      options: '=', 
 
      pre_selected: '=preSelected' 
 
     }, 
 
     template: "<div class='btn-group' data-ng-class='{open: open}'>"+ 
 
     "<button class='btn btn-small'>Select</button>"+ 
 
       "<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><span class='caret'></span></button>"+ 
 
       "<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" + 
 
        "<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>" + 
 
        "<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>" +      
 
        "<li class='divider'></li>" + 
 
        "<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>" +           
 
       "</ul>" + 
 
      "</div>" , 
 
     controller: function($scope){ 
 
      var count = '1';  
 
       $scope.$watch(count, function() { 
 
     alert(count) 
 
    }); 
 
       
 
      $scope.openDropdown = function(){   
 
        $scope.selected_items = []; 
 
        for(var i=0; i<$scope.pre_selected.length;i++){      $scope.selected_items.push($scope.pre_selected[i].id); 
 
        }}; 
 
      
 
      $scope.selectAll = function() { 
 
       $scope.model = _.pluck($scope.options, 'id'); 
 
       console.log($scope.model); 
 
      };    
 
      $scope.deselectAll = function() { 
 
       $scope.model=[]; 
 
       console.log($scope.model); 
 
      }; 
 
      $scope.setSelectedItem = function(){ 
 
       count = count +1; 
 
       var id = this.option.id; 
 
       if (_.contains($scope.model, id)) { 
 
        $scope.model = _.without($scope.model, id); 
 
       } else { 
 
        $scope.model.push(id); 
 
       } 
 
       console.log($scope.model); 
 
       return false; 
 
      }; 
 
      $scope.isChecked = function (id) {     
 
       if (_.contains($scope.model, id)) { 
 
        return 'icon-ok pull-right'; 
 
       } 
 
       return false; 
 
      };         
 
     } 
 
    } 
 
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="AppCtrl">  
 
    <dropdown-multiselect pre-selected="member.roles" model="selected_items" options="roles"></dropdown-multiselect> 
 
    
 
    <pre>selected roles = {{selected_items | json}}</pre> 
 
</div>

内部指令我有这行：

$scope.$watch(count, function() { 
    alert(count) 
}); 

在功能$scope.setSelectedItem我有这一行count = count+1。 count当我检查下拉元素中的项目时，变量被修改（增加）。

我希望$watch 会在计数变量发生变化并且弹出警告窗口时触发。

但是，当我从下拉框中选择项目时，警告窗口不会弹出，似乎听众没有被解雇。

任何想法我缺少什么？为什么$ watch中的监听器函数没有被解雇？

Answer 1

您需要将count放在您的$scope才能使用类似的监视器。遵守以下变化...

$scope.count = 1; 

$scope.setSelectedItem = function() { 
    $scope.count += 1; 
[...] 

// -- string argument 
$scope.$watch('count', function(newVal, oldVal) { 
    alert(newVal) // -- or $scope.count 
}); 

JSFiddle Link - 这里是一个简单的演示这表明悫您最初的方法，这个方法的差异。

---

虽然，你可以修改你的守望者到$watch一个局部变量，声明将只是会略有不同。遵守以下...

var count = 1; 

$scope.setSelectedItem = function() { 
    count += 1; 
[...] 

scope.$watch(function() { 
    return count // -- return local variable 
}, function(newVal, oldVal) { 
    console.log(newVal) 
}); 

JSFiddle Link - $watch局部变量