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

Question

我试图开发一个角度应用程序使用ui路由器，但我被困在试图使控制器的语法正确工作。

我的stateProvider看起来像这样

$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。 控制器："MyRegisteredController“控制器："MyRegisteredController as fooCtrl”控制器:函数($scope，MyService) { $scope.data = MyService.getData()；} - UI路由器$stateProvider API引用。

根据Docs，您的控制器声明是正确的。

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'
      }
    });
})

The PLNKR演示

Answer 2

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

Answer 3

尝试将选项控制员as：'vm‘添加到状态参数中，而不是像在控制器选项中那样定义控制器。

或者，如果我没弄错，你可以加上

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