javascript - 如何通过服务强制更新 AngularJS 中的 View ？

Question

我正在尝试保留一个为导航菜单提供服务的全局 MainCtrl Controller 。这些菜单项应该不时地由不同的 Controller 更新。

现在我想我可能只是将导航链接绑定(bind)到 Controller ，并按如下方式更新 Controller 变量:

<div ng-controller="MainCtrl">
    <li ng-repeat="nav in navigations">
        <a href="#{{nav.path}}">{{nav.label}}</a>
    </li>
</div>
<div ng-view></div> <!-- renders different controllers, eg testController.js -->

app.controller('MainCtrl', ['$scope', 'navigationService', function($scope, navigationService) {
    //binding the property of the service
    $scope.navigations = navigationService.navigations;
}]);

app.service('navigationService', function() {
    return {
        navigations: null
    };
});

但是，当调用服务并更新内部的 navigations 变量时， View 中没有任何变化。为什么？

angular.module('test').controller('testController', ['$scope', '$http', 'navigationService', function($scope, $http, navigationService) {
    $http.get(url)
        .success(function(data) {
            navigationService.navigations = data.some.navigations; //assume json data exists
        });
}]);

如何实现这种双向数据绑定(bind)，强制 View 从一个 Controller 更新到另一个 Controller ？

Answer 1

您正在从服务返回一个基元。原语没有继承。

返回一个对象:

app.service('navigationService', function() {    
    var nav ={}; // object that will be returned       
    function init(){
        $http.get(url)
            .success(function(data) {
                // modify object returned from service rather than reassign a primitive value
                nav.items = data.some.navigations; exists
            });
    }

    init();//make request to load the data

    return { // can add more properties if needed           
        nav: nav
    };
});

然后在 Controller 中:

 $scope.navigations = navigationService.nav;
 // will initially be {} and later will inherit items property

在 View

<div ng-repeat="item in navigations.items">

Angular 内部 watch 将拾取现在对对象所做的更改并相应地渲染 View