Question

我正在将AngularJS多页应用程序迁移到单页应用程序，我在复制以下行为时遇到一些麻烦：

每个HTML文件都有不同的基本控制器和ng-view。例如，file1.html如下所示：

<body ng-controller="BaseCtrl1">
  <!-- Routes to /view11, /view12, etc. with their corresponding controllers -->
  <div ng-view></div>
</body>
<script src="file1.js"></script>

file2.html使用BaseCtrl2，路由到/views21，/view22等等。每个控制器都初始化范围，相应的视图子集共享模型的这一部分：

file1.js：

module.controller('BaseCtrl1', function($scope, ServiceA, ServiceB, ServiceC) {
  // Populate $scope with ServiceN.get() calls
  ServiceA.get(function(response) {
    $scope.foo = response.results;
  });
});
// ...

file2.js：

module.controller('BaseCtrl2', function($scope, ServiceX, ServiceY) {
  // Populate $scope with ServiceN.get() calls
});
// ...

但是，对于单页应用程序，我不能为每个不同的视图组使用固定的父控制器（在body元素中声明）。我已尝试在$controller service中使用the answer of this question，但我需要在子控制器中注入父项的所有依赖项，并且看起来不像一个简洁的解决方案：

module.controller('View11Ctrl', function($scope, ServiceA, ServiceB, ServiceC) {
  $controller('BaseCtrl1', {/* Pass al the dependencies */});
});

module.controller('View12Ctrl', function($scope, ServiceA, ServiceB, ServiceC) {
  $controller('BaseCtrl1', {/* Pass al the dependencies */});
});

我想知道是否有办法通过初始化一组视图范围的“公共”部分来复制原始行为，并在更改路径时进行维护。

Answer 1

您可以使用$injector.invoke()服务方法来实现此目的。

module.controller('View11Ctrl', function($scope, ServiceA, ServiceB, ServiceC) {
  $injector.invoke(BaseCtrl1, this, { $scope: $scope });
}

第三个参数定义为：

如果预设，则首先从该对象读取任何参数名称，在咨询美元注射器之前。

这样，您只需将本地传递给特定于子控制器的基本控制器，并使用普通的$ injector DI来解析所有其他基本控制器依赖关系。

一组视图的不同父控制器

1 个答案: