Question

可以使用roteProvider

为一个视图使用两个不同的控制器

类似的东西：

angular.module('myApp', 'ui.router', 'ui.bootstrap', 'indexedDB', 'ngOrderObjectBy']).config(function ($stateProvider, $urlRouterProvider, $indexedDBProvider) {

$urlRouterProvider.otherwise("/student");

$stateProvider
    .state('studentId', {
        url: "/student/:studentId/:classId",
        templateUrl: "views/Student/Student.html",
          controller:'StudentCtrl'
    })
    .state('modules', {
        url: "/modules",
        templateUrl: "views/modules/modules.html",
          controller:'studentCtrl',
          controller:'modulesCtrl'          
 });

Answer 1

您不能以这种方式定义两个控制器，传递给.state的第二个参数是一个javascript对象，它的键是唯一的。尝试打开浏览器控制台并执行以下操作：

> var obj = {"view":"a", "controller":"CA", "controller":"CB"}
> obj
< Object {view: "a", controller: "CB"}

您会看到只保存了最后一个键/值。

回到问题，我认为你可以在模板中应用第二个控制器。在配置中，您将拥有：

$stateProvider
    .state('studentId', {
       ...
    })
    .state('modules', {
        url: "/modules",
        templateUrl: "views/modules/modules.html",
        controller:'modulesCtrl'          
 });

在模板中：

<div class="modules">
    ...
    <div class="students" ng-controller="studentCtrl">
        ...
    </div>
    ...
</div>

Answer 2

您可以使两个状态成为公共父抽象状态的子项。唯一的缺点是抽象状态必须有一个URL，这将出现。 URL可以是简单的（例如'/ a'）或描述两个模块的东西。

为什么视图共享一个控制器？这些功能是在控制器中实现的吗？常见的Angular编码标准适用于将工厂/服务中存储的函数和对象映射到视图的精简控制器。据推测，您的每个州都有一个独特的控制器，可以将一个或多个工厂的功能映射到视图中。然后，控制器将只包含映射中实际使用的变量或函数的映射。

但是，如果您最多可以将控制器添加到控制器，如果您单独定义该功能：

angular.module('MyApp', [])

.controller('Ctrl1', Ctrl1)
  .controller('Ctrl2', Ctrl2)
  .controller('Ctrl3', Ctrl3);

function Ctrl1() {
  var vm = this;
  vm.name = "Ctrl1name";
  vm.fn = function() {
    console.log("I am controller Ctl1")
  };
}

function Ctrl2() {
  var vm = this;
  vm.name = "Ctrl2name";
  vm.fn = function() {
    console.log("I am controller Ctl2")
  };
}

function Ctrl3() {
  var vm = this;
  vm.ct1 = new Ctrl1();
  vm.ct2 = new Ctrl2();

}

在此Codepen：http://codepen.io/StretchKids/pen/gPoERN/?editors=0010

如您所见，Ctrl3的函数将变量设置为新版本的Ctrl1和Ctrl2的函数。内部变量通过该变量

访问

使用routeprovider angularjs为一个视图使用两个控制器

2 个答案: