angularjs：如果服务被指令调用，$watch 不会触发更新的服务变量答案

【问题标题】：angularjs: $watch not triggering on service variable updated if the service is called by directiveangularjs：如果服务被指令调用，$watch 不会触发更新的服务变量
【发布时间】：2017-05-31 23:34:03
【问题描述】：

$watch 在我使用控制器函数更改服务变量时触发，但是当 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>

我知道指令确实改变了变量，因为函数 service1.display_x_value 显示了变化。奇怪的是，如果变量之前发生了变化，调用这个函数会触发 $watch。

我尝试通过调用指令中的控制器函数来更改变量，但这也不起作用：

mainApp.directive ("testDirective", function (service1) {
            return {
                link: function ($scope, element, attrs) {
                    element [0].onclick=function () {

                        $scope.add ()
                    };


                }
            }
        })

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

点击事件不会触发摘要循环使用$scope.$apply()

    mainApp.directive ("testDirective", function (service1) {
        return {
            link: function ($scope, element, attrs) {
                element [0].onclick=function () {
                    service1.x = service1.x + 2000
                    $scope.$apply()
                }
            }

        }
    })

【讨论】：