When I modify the service variable using a controller function, the $watch is triggered. However, it does not trigger when the same variable is changed by a directive.
<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>
The directive actually changes the variable, as indicated by the output of service1.display_x_value. Interestingly, calling this function causes $watch to trigger if the variable was modified previously.
I attempted to alter the variable by invoking the controller function in the directive, but that did not produce any results:
mainApp.directive ("testDirective", function (service1) {
return {
link: function ($scope, element, attrs) {
element [0].onclick=function () {
$scope.add ()
};
}
}
})