Angular ui路由器控制器，语法不起作用

Question

我正在尝试使用ui路由器开发有角度的应用程序，但是我一直在尝试使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'
      }
    });

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

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_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>

这里是plnkr示例http://plnkr.co/edit/Na5zkF?p=preview

[我正在寻找一个人来帮助我弄清如何单击xxx按钮时如何调用toggleSideNav函数，以及如何使标题显示在工具栏中。

Answer 1

来自文档：

控制器（可选的）串功能

控制器fn，如果以字符串形式传递，则应与新关联的范围或注册控制器的名称相关联。 （可选）可以在此处声明ControllerAs。

 controller: "MyRegisteredController"

 controller:
    "MyRegisteredController as fooCtrl"

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

— UI Router $stateProvider API Reference。

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

controller: 'MicrositeController as vm'

您需要在其他地方查找问题。

DEMO on PLNKR

Answer 2

尝试将选项controllerAs: 'vm'添加到状态参数，而不是像controller选项中那样定义控制器。

Answer 3

尝试将选项controllerAs：'vm'添加到状态参数中，而不是在controller选项中定义控制器。

或者，如果我没记错的话，您可以添加

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