Question

当我通过使用控制器函数更改服务变量时，

$ 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 = 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 ()
                    };


                }
            }
        })

Answer 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()
                }
            }

        }
    })

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

1 个答案: