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

带侧边按钮的工具栏是

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

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

我有一个vm.toggleSideNav函数，可以打开和关闭sidenav，但是永远不会被调用。

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

全局名称空间是否真正声明了$mdMedia和$mdSidenav？或者你没有注射它们？如果$mdMedia('gt-sm')未定义，则vm.sidenav_locked_open永远不会被切换。

更新

$ mdMedia的好收获，但这并没有解决问题。我更新了plnkr

使用您的Plnkr，我修改了模板以添加一个按钮来调用toggleSideNav函数。

它使用此错误调用该函数：

ReferenceError: $mdMedia is not defined
at vm.toggleSideNav

NEW Plnkr

下次更新

你再次找到了我，我输入了$ mdDialog而不是$ mdMedia。我还发现我需要$ mdSidenav。现在它已修复，您的按钮可以正常工作，但xxx按钮仍然没有。

问题是您的xxx按钮处于根状态，但根状态没有指定的控制器。更改配置以将控制器置于根状态。

  $stateProvider
    .state('microsite', {
      url: "/",
      templateUrl: "microsite.tmpl.html",
      //Put controller on root state
      controller: 'MicrositeController as vm',
      abstract: true
    })

NEWer Plunkr。

Answer 2

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

Answer 3

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

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

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

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

3 个答案:

更新

下次更新