CODEWITHSUNDEEP
javascriptangularjs
Jack hardcastle
Jack hardcastle

Reputation: 2875

angularjs watch for change in scope variable made from another controller

I have the following service

function PathFactory() {
    this.path = null;
    this.setPath = function(path) {
        this.path = path;
    }
    return this;
}

My navigation controller: 

function NavController($scope, PathFactory) {

    list = document.getElementsByTagName("ul");
    list = list[0];

    var items = list.getElementsByTagName("li");
    for(var i = 0 ; i < items.length ; i++) {
        items[i].setAttribute("navIndex", i);
        items[i].addEventListener("click", navClick);
    }

    function navClick(e) {
        switch(e.path[1].hash) {
            case "#home":
                PathFactory.setPath("home");
                break;
            case "#bots":
                PathFactory.setPath("bots");
                break;
            case "#servers":
                PathFactory.setPath("servers");
                break;
            case "#status":
                PathFactory.setPath("status");
                break;
        }
    }
}

And my content controller:

function ContentController($scope, PathFactory) {

    $scope.$watch(function() {
        return PathFactory.path;
    }, function (newValue) {
        alert("changed value");
    });

}

The $scope.$watch isn't running the function should the value of PathFactory.path be changed by the navigation controller, any way I can get this setup working?

Cheers guys.

Upvotes: 0

Views: 2992

Answers (1)

Nano
Nano

Reputation: 1398

If you want that AngularJS calls the $watch() Method, then you have to call the $apply() Method manualy.

Angulars two-way-databinding only works, because everything that changes anything in $scope also calls the $apply Method. That way Angular knows something has changed.

Try to put this line of code $scope.$apply(); at the end of your navClick Function.

But you should definitely use a directive for event listeners and/or DOM-Manipulation

Upvotes: 2

Related Questions