Javascript angularjs:$watch在指令调用服务时不触发更新的服务变量
$watch在我使用控制器函数更改服务变量时触发，但在指令更改同一变量时，不会触发Javascript angularjs:$watch在指令调用服务时不触发更新的服务变量,javascript,angularjs,Javascript,Angularjs,$watch在我使用控制器函数更改服务变量时触发，但在指令更改同一变量时，不会触发 <html> <head> <meta charset="UTF-8"> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script> <script> var mainApp
<html>
<head>
<meta charset="UTF-8">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<script>
var mainApp = angular.module('mainApp', []);
mainApp.service ("service1", function () {
this.x = 0
this.add = function () {
this.x += 1;
}
this.display_x_value = function () {
alert (this.x)
}
})
mainApp.controller ( 'c1', function ($scope, service1) {
/////// Add 1 to service1.x
$scope.add = function () {
service1.add ();
}
////// display the value of service1.x
$scope.display_value = function () {
service1.display_x_value ();
}
///// watch service1.x
$scope.$watch ( function () {
return service1.x
},
function (newVal, oldVal, $scope) {
alert ("watch has triggered : " + newVal)
}, true )
});
mainApp.directive ("testDirective", function (service1) {
return {
link: function ($scope, element, attrs) {
element [0].onclick=function () {
service1.x = service1.x + 2000
}
}
}
})
</script>
</head>
<body ng-app="mainApp" ng-controller="c1">
<button ng-click="add ()">change service1.x BY CONTROLLER</button>
<button test-directive> change service1.x BY DIRECTIVE </button>
<button ng-click="display_value ()"> display service1.x </button>
</body>
</html>
单击事件不触发摘要循环使用
$scope.$apply（）单击事件不触发摘要循环使用
$scope.$apply（）mainApp.directive ("testDirective", function (service1) {
return {
link: function ($scope, element, attrs) {
element [0].onclick=function () {
$scope.add ()
};
}
}
})
mainApp.directive ("testDirective", function (service1) {
return {
link: function ($scope, element, attrs) {
element [0].onclick=function () {
service1.x = service1.x + 2000
$scope.$apply()
}
}
}
})