Question

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

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

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

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

我的问题是我应该如何设计这个，我是否以正确/棱角分明的方式思考这个问题？

Answer 1

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

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

1 个答案: