angularjs – 如何在同一页上多次使用角度控制器？

深入挖掘,我认为您的决定实际上取决于您使用数据的原因.如果每个插槽都是自包含的,则重新使用相同的服务可能很好,并且不需要与其他插槽真正交互太多.如果是这种情况,那么你甚至不需要服务：每个控制器都可以简单地保留自己的本地数据副本,一切都会好的.

例如,

angular.module('mean.root').controller('ContentA1Controller',function($scope){
    //each instance's scope will keep its own local data,//but other scopes won't really have access to it
    $scope.data = [1,2,3,4,5]
});

但是,如果您需要与页面的其他元素共享每个控制器的数据,那么服务可以帮助您.

//factory also works instead of service; use whichever you prefer
angular.module('mean.root').service('MyDataService',function(){
    this.bucket = {};

    this.saveData = function(data,id){
        this.bucket[id]=data;
    }

    this.getData = function(id){
        return this.bucket[id];
    }
});

然后你的控制器被声明为

<div ng-controller='MyController' number='2'>

(或者,而不是’number’,任何标识它的实例的自定义属性)
你的控制器代码是

angular.module('mean.root').controller('ContentA1Controller',function($scope,$attrs,MyDataService){
    //I'm skipping data setup,null checking,etc.,so be sure to add those!
    $scope.data = MyDataService.getData($attrs.number);

    //do some cool stuff here!

    //Make a 'save' function to put the data back
    $scope.save = function(){
       MyDataService.saveData($scope.data,$attrs.number);
    }
});

通过使用服务,其他控制器(甚至服务)可以访问每个插槽正在使用的数据,而无需挖掘并找到该控制器的确切$范围.

此外,根据您的应用的设置方式,您可能需要在服务数据发生变化时更新您的视图;使用$scope非常容易.$watch().您可以阅读this SO post以了解有关如何执行此操作的更多信息.