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

问题描述

我正在尝试使用 ui 路由器开发一个有角度的应用程序，但是我在尝试让 controllerAs 语法正常工作时遇到了困难.

我的 stateProvider 看起来像这样

$stateProvider.state('微型网站', {网址:/"，templateUrl: "microsite.tmpl.html",摘要:真实}).state('microsite.home', {网址:"",templateUrl: "home.tmpl.html",控制器:'MicrositeController as vm',数据: {page_name: '介绍'}}).state('microsite.features', {网址:/功能"，templateUrl: "features.tmpl.html",控制器:'MicrositeController as vm',数据: {page_name: '功能'}}).state('microsite.about', {网址:/关于"，templateUrl: "about.tmpl.html",控制器:'MicrositeController as vm',数据: {page_name: '关于'}});

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

myapp.controller('MicrositeController', ['$state', function($state) {var vm = 这个；vm.page_name = $state.current.data.page_name;vm.sidenav_locked_open = false;vm.toggleSideNav = 函数(){如果 ($mdMedia('gt-sm')) {vm.sidenav_locked_open = !vm.sidenav_locked_open;} 别的 {$mdSidenav('left').toggle();}}}]);

然后通过 vm.page_name 变量将名称传递给页面.然而，这并没有发生.变量永远不会进入页面.另外，我有一个 vm.toggleSideNav 函数，它假设打开和关闭 sidenav，但从未被调用.

带有sidenav按钮的工具栏是这个

<div class="md-toolbar-tools docs-toolbar-tools" tabIndex="-1"><md-button class="md-icon-button" ng-click="vm.toggleSideNav()" aria-label="切换菜单">XXX</md-button><h1>{{vm.page_name}}</h1>

</md-工具栏>

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

我正在找人帮我弄清楚如何在单击 xxx 按钮时调用 toggleSideNav 函数以及如何在工具栏中显示标题.

解决方案

来自文档:

<块引用>

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

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

 控制器:MyRegisteredController"控制器:MyRegisteredController 作为 fooCtrl"控制器:函数($scope，MyService){$scope.data = MyService.getData();}

— UI 路由器 $stateProvider API 参考.

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

controller: 'MicrositeController as vm'

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

<小时>

更新

将控制器置于根状态:

$stateProvider.state('微型网站', {网址:/"，templateUrl: "microsite.tmpl.html",//重要 == 将控制器置于根状态控制器:'MicrositeController as vm',摘要:真实}).state('microsite.home', {网址:"",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̶̶s̶̶s̶̶s̶̶s̶̶s̶̶v数据: {page_name: '介绍'}}).state('microsite.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̶̶s̶̶s̶̶s̶̶s̶̶s̶̶v数据: {page_name: '功能'}}).state('microsite.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̶̶s̶̶s̶̶s̶̶s̶̶s̶̶v数据: {page_name: '关于'}});})

PLNKR 上的演示

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

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

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();
    }
  }
}]);

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.

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>

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

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.

解决方案

From the Docs:

controller (optional) string function

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 Router $stateProvider API Reference.

According to the Docs, your controller declaration is correct.

controller: 'MicrositeController as vm'

You need to look for your problem elsewhere.

---

UPDATE

Put the controller in the root state:

$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 DEMO on PLNKR

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