Angular - 在路由中使用 ControllerAs 的多个控制器

Question

我有一个问题，我将继续解释。在 html 页面顶部使用 ControllerAS 时，如下所示：

<div ng-controller="MyController as myControllerVM">

我可以使用 myControllerVM 名称引用控制器中的内容。

即在我的控制器中，我设置了一个变量 this 并为其分配了其他变量，如下所示：

var vm = this; 
vm.number = 1;

然后我可以像这样在 html 中引用这个变量：

myControllerVM.number

只要我的页面顶部有

 <div ng-controller="MyController as myControllerVM">

我想做的是只通过路由完成同样的事情。我试过这个：

.when(myROUTE, {
            templateUrl: 'template.html',
            controller: 'MyController',
            controllerAs: 'myControllerVM'

并将控制器中的所有内容分配给变量 vm，它像以前一样指向 this。但是在我的 html 页面中，这些值并没有像在 html 页面顶部的 "controller as" 名称那样被提取出来，即我不能再引用这些值html 为 myControllerVM.name（该值未被提取）。我在路线中需要它的原因是因为我想为一个 html 页面使用不同的控制器。

为什么在路由中使用 controllerAs 不起作用。

Answer 1

我看不到你所有的代码，但你可以在这里找到工作示例

http://plnkr.co/edit/aedTeP2DbicGYwdGWKvU?p=preview

即：

myApp.config(function($stateProvider, $urlRouterProvider) {
  //
  // For any unmatched url, redirect to /state1
  $urlRouterProvider.otherwise("/state1");
  //
  // Now set up the states
  $stateProvider
    .state('state1', {
      url: "/state1",
      templateUrl: "state1.html",
      controller: 'state1Ctrl',
      controllerAs:'vm'
    })

    .state('state2', {
      url: "/state2/",
      templateUrl: "state2.html",
      controller: 'state2Ctrl',
      controllerAs:'vm'



    });
});

myApp.controller('state2Ctrl', function(){
  var vm = this;
  vm.title= "That is my second"

});

myApp.controller('state1Ctrl', function($scope){
  var vm = this;
  vm.title= "fist controller";


});

Answer 2

你做的一切都是正确的

.when(myROUTE, {
            templateUrl: 'template.html',
            controller: 'MyController',
            controllerAs: 'myControllerVM'

我不确定 Angular 文档是否足够清楚，但路由器当前控制器的范围是 ngView 的范围。因此，您只能在模板或 ngView 元素属性中使用 MyController 范围变量（包括使用 myControllerVM 标识符的变量）。我想这是问题的根源。

Angular - 在路由中使用 ControllerAs 的多个控制器

Angular - Multiple controllers using ControllerAs in route

angularjs

angular-ui

angularjs-scope