javascript - 如何在 Controller 外修改angularjs数据？

Question

我有一个主页，它只包含两部分:导航标题和动态内容。

index.html:

<div ng-controller='MainCtrl'>
    <li ng-repeat="nav in navs">
        <a href="#{{nav.url}}">{{nav.name}}</a>
    </li>
</div>
<div ng-view></div> <!-- replaced by ngRoute -->

导航实现如下:

app.config(function($routeProvider, $locationProvider) {
    $routeProvider.when("/test", {
        templateUrl : "templates/test.html",
        controller : "testController"
    });
});

标题链接应由后端在每个网络服务请求中提供。问题:如何从另一个 Controller (接收 get 响应的 Controller )中触发以下 init 函数？我稍后想从不同的 Controller 中触发此方法。

app.controller('MainCtrl', ['$scope', function($scope) {
    this.init = function(data) {
        $scope.navs = data;
    }
}]);

我尝试了以下方法，但没有用:

测试.html:

<div>
    <h1>some stuff provided by testController.js</h1>
</div>

测试 Controller .js:

angular.module('test').controller('testController', ['$scope', '$http', '$controller', function($scope, $http, $controller) {
    $http.get(url)
        .success(function(data) {
            $controller('MainCtrl').init(data.mynavigation); //assume navigations exists

            //process content in data
        });
}]);

结果:

Error: [$injector:unpr] http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20MainCtrl

Answer 1

我建议不要使用 init 设置数据，而是在 Controller 的 $scope 中注入(inject)一个服务，这样您就不需要调用 Controller 中的函数，只需更改服务的数据即可。

是这样的:

app.controller('MainCtrl', ['$scope', 'myService', function($scope, myService) {
    this.navs = myService;
}]);

html:

<div ng-controller='MainCtrl'>
    <li ng-repeat="nav.data in navs">
        <a href="#{{nav.url}}">{{nav.name}}</a>
    </li>
</div>

然后，您的服务:

app.factory('myService',function() {
   var myService = {
       data: [],
       setData(data): function(data) {
           this.data = data;
       }
   }
   return myService;
});

这只是为了说明:myService 在所有应用程序中都是同一个对象，如果更改 myService.data，注入(inject)此服务的每个 Controller 都将使用相同的数据。

因此，您将触发器放在另一个 Controller 中以更新此服务。此技术也用于在指令之间共享数据。