今天我在使用$watch的AngularJS中遇到了一些非常奇怪的行为.我将代码简化为以下示例：
https://jsfiddle.net/yLeLuard/
此示例包含将跟踪状态变量的服务.指令用于将click事件绑定到DOM,通过服务更改状态变量.
这个例子有两个问题：
>第一个关闭按钮(上面带有ng-click属性)仅更改第二次单击时的状态
>没有ng-click的两个按钮根本不会改变状态
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',template: '<button>Close</button>',function() {
state.isOpen = false;
});
}
};
}]);
myApp.service('state',function() {
return {
isOpen: null
};
});
解决方法
那是因为您在点击时使用了本机事件监听器.此事件是异步的,不属于Angular摘要周期,因此您需要手动消化范围.
myApp.directive('open',function() {
scope.$apply(function() {
state.isOpen = true;
});
});
}
};
}]);
固定小提琴：https://jsfiddle.net/7h95ct1y/
我建议直接在ng-click中更改状态：ng-click =“api.isOpen = true”
