angularjs监视由另一个控制器进行的范围变量的更改

Question

我有以下服务

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

我的导航控制器：

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

而我的内容控制器：

function ContentController($scope, PathFactory) {

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

}

$ scope。$ watch没有运行该功能，是否应该由导航控制器更改PathFactory.path的值，以任何方式可以使此设置正常工作？

干杯们。

Answer 1

如果您希望AngularJS调用$watch()方法，则必须手动调用$apply()方法。

Angulars双向数据绑定仅起作用，因为在$scope任何更改的所有内容也称为$apply方法。 这样，Angular知道某些事情已经改变。

尝试将这段代码放到$scope.$apply(); 在navClick函数的末尾。

但是您绝对应该对事件侦听器和/或DOM操作使用指令