Angular ui路由器控制器-语法不起作用 [英] Angular ui router controlleras syntax not working

问题描述

我正在尝试使用ui路由器开发有角度的应用程序，但是我一直在尝试使controllerAs语法正常工作.

I an trying to develop an angular app using ui router, however I am stuck trying to get the controllerAs syntax working correctly.

我的stateProvider看起来像这样

my stateProvider looks like this

$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的数据对象.这会送入我的控制器

As you can see I setup an abstract default view, and three pages. I have also assigned a data object with a page_name for each page. This feeds into my controller

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，但是永远不会被调用.

and then delivers the name to the page via the vm.page_name variable. However this is not happening. The variable never makes it to the page. Also I have a vm.toggleSideNav function that is suppose to open and close the sidenav, but that never gets called.

带有sidenav按钮的工具栏是

the toolbar with the sidenav button is this

<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

here is a plnkr example http://plnkr.co/edit/Na5zkF?p=preview

我正在寻找可以帮助我找出最后一部分的内容，该内容是关于如何单击xxx按钮时如何调用toggleSideNav函数以及如何使标题显示在工具栏中的.

I am looking for someone to help me figure out the last piece on how to get the toggleSideNav function to get called when I click on the xxx button, and how to get the title to display in the toolbar.

推荐答案

来自文档:

控制器 (选修的) 细绳 功能

controller (optional) string function

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

Controller fn that should be associated with newly related scope or the name of a registered controller if passed as a string. Optionally, the ControllerAs may be declared here.

 controller: "MyRegisteredController"

 controller:
    "MyRegisteredController as fooCtrl"

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

- UI路由器$ stateProvider API参考.

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

According to the Docs, your controller declaration is correct.

controller: 'MicrositeController as vm'

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

You need to look for your problem elsewhere.

将控制器置于根状态:

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

在PLNKR上进行演示

这篇关于Angular ui路由器控制器-语法不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！