Angularjs 角度ui路由器控制器语法不工作

我正在尝试使用ui路由器开发angular应用程序，但是我一直在尝试让controllerAs语法正常工作

我的状态提供者看起来像这样

$stateProvider
    .state('microsite', {
      url: "/",
      templateUrl: "microsite.tmpl.html",
      abstract: true
    })
    .state('microsite.home', {
      url: "",
      templateUrl: "home.tmpl.html",
      controller: 'MicrositeController as vm',
      data: {
        page_name: 'Introduction'
      }
    })
    .state('microsite.features', {
      url: "/features",
      templateUrl: "features.tmpl.html",
      controller: 'MicrositeController as vm',
      data: {
        page_name: 'Features'
      }
    })
    .state('microsite.about', {
      url: "/about",
      templateUrl: "about.tmpl.html",
      controller: 'MicrositeController as vm',
      data: {
        page_name: 'About'
      }
    });

如您所见，我设置了一个抽象的默认视图和三个页面。 我还为每个页面分配了一个带有页面名称的数据对象。这个输入我的控制器

myapp.controller('MicrositeController', ['$state', function($state) {
  var vm = this;
  vm.page_name = $state.current.data.page_name;
  vm.sidenav_locked_open = false;

  vm.toggleSideNav = function() {
    if ($mdMedia('gt-sm')) {
      vm.sidenav_locked_open = !vm.sidenav_locked_open;
    } else {
      $mdSidenav('left').toggle();
    }
  }
}]);

然后通过vm.page\u name变量将名称传递到页面。 然而，这并没有发生。变量永远不会到达页面。 此外，我还有一个vm.toggleSideNav函数，该函数假定用于打开和关闭sidenav，但从未被调用

带有sidenav按钮的工具栏如下所示

<md-toolbar layout="row" class="md-whiteframe-glow-z1 site-content-toolbar">
<div class="md-toolbar-tools docs-toolbar-tools" tabIndex="-1">
    <md-button class="md-icon-button" ng-click="vm.toggleSideNav()" aria-label="Toggle Menu">
        XXX
    </md-button>

    <h1>{{vm.page_name}}</h1>
</div>
</md-toolbar>

XXX
{{vm.page_name}

下面是一个plnkr示例

---

我想找人帮我找出最后一条，当我点击xxx按钮时，如何调用toggleSideNav函数，以及如何获取要在工具栏中显示的标题。

尝试将选项

controllerAs:“vm”

添加到状态参数，而不是在

controller

选项中定义控制器

尝试将选项controllerAs:“vm”添加到状态参数，而不是在控制器选项中定义控制器

或者，如果我没弄错的话，你可以补充一句

myapp.controller('MicrositeController as vm' ...

从文档中：

控制器 （可选） 一串 作用

控制器fn，如果作为字符串传递，则应与新相关的作用域或已注册控制器的名称关联。或者，可以在此处声明控制器

 controller: "MyRegisteredController"

 controller:
    "MyRegisteredController as fooCtrl"

 controller: function($scope, MyService) {
    $scope.data = MyService.getData(); }

-

根据文档，您的控制器声明是正确的

controller: 'MicrositeController as vm'

你需要在别处寻找你的问题

---

更新 将控制器置于根状态：

$stateProvider
    .state('microsite', {
      url: "/",
      templateUrl: "microsite.tmpl.html",
      //IMPORTANT == Put controller on root state
      controller: 'MicrositeController as vm',
      abstract: true
    })
    .state('microsite.home', {
      url: "",
      templateUrl: "home.tmpl.html",
      ̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶:̶ ̶'̶M̶i̶c̶r̶o̶s̶i̶t̶e̶C̶o̶n̶t̶r̶o̶l̶l̶e̶r̶ ̶a̶s̶ ̶v̶m̶'̶,̶
      data: {
        page_name: 'Introduction'
      }
    })
    .state('microsite.features', {
      url: "/features",
      templateUrl: "features.tmpl.html",
      ̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶:̶ ̶'̶M̶i̶c̶r̶o̶s̶i̶t̶e̶C̶o̶n̶t̶r̶o̶l̶l̶e̶r̶ ̶a̶s̶ ̶v̶m̶'̶,̶
      data: {
        page_name: 'Features'
      }
    })
    .state('microsite.about', {
      url: "/about",
      templateUrl: "about.tmpl.html",
      ̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶:̶ ̶'̶M̶i̶c̶r̶o̶s̶i̶t̶e̶C̶o̶n̶t̶r̶o̶l̶l̶e̶r̶ ̶a̶s̶ ̶v̶m̶'̶,̶
      data: {
        page_name: 'About'
      }
    });
})

---

ngRoute和uiRouter都有一个路由的

controllerAs:

选项。您不应该使用

controller:“MicrositeController as vm'，

，而应该执行

controller:“MicrositeController”，controllerAs:“vm'，

将控制器添加到父状态来修复它。我认为抽象的：真的会指导父母使用孩子身上的一切，我想不是。