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

我正在构建一个带有6个插槽的简单仪表板.用户可以选择他们想要放入每个插槽的内容类型,他们也可以选择要放入多个插槽的相同内容.这就是问题所在……

我想构建应用程序,以便通过ng-include动态地将内容模板注入到插槽中,并且内容模板将包含对该内容的控制器的ng-controller =“Content1Controller”引用.

但是,在多个插槽中添加相同内容时,每次都会为多个内容实例重新运行控制器.

由于跟踪控制器中的实例是不可行的,因为它可能可以重新运行,我应该跟踪服务中的实例,并让控制器每次运行时都检查服务吗？

我的问题是我应该如何构建这个,我是否以正确/有角度的方式思考这个问题？

解决方法

Services是在Angular应用程序中存储常用数据的好方法,因此这是我关于如何构建应用程序的第一个建议.

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

例如,

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以了解有关如何执行此操作的更多信息.