我正在构建一个带有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以了解有关如何执行此操作的更多信息.