angularjs: $watch not triggering on service variable updated if the service is called by directive

Question

$watch triggers when I change the service variable by using a controller function, But it does not trigger when a directive changes the same variable.

<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>

I know that the directive does change the variable, because the function service1.display_x_value shows the change. Curiously, calling this function causes $watch to trigger, if the variable changed before.

I have tried to change the variable by calling the controller function in the directive, but that doesn't work either:

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

                        $scope.add ()
                    };


                }
            }
        })

aseferov · Accepted Answer · 2017-05-31 15:34:03Z

2

click event doesnt trigger digest cycle use $scope.$apply()

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

        }
    })

edited May 31, 2017 at 15:34

answered May 31, 2017 at 15:22

aseferov

6,4133 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angularjs: $watch not triggering on service variable updated if the service is called by directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related