md-nav-bar 使用 Angular 1.5 组件答案

【问题标题】：md-nav-bar using angular 1.5 componentsmd-nav-bar 使用 Angular 1.5 组件
【发布时间】：2016-11-20 08:02:09
【问题描述】：

因此，我正在尝试找出使用 angular-material 和 angular 1.5 组件的最佳实践，并且正在努力专门设置 md-nav-bar。

这是一个带有我当前代码的代码笔：http://codepen.io/anon/pen/QEQwaG?editors=1010

请注意，即使我在 $onInit 生命周期挂钩期间初始化 this.currentNavItem，但如何未选择 Home 选项卡。

我希望这会起作用，尽管可能不熟悉导致此行为的组件作用域的工作原理。

在我的实际项目（ES6/Babel）中，我通过将 $scope 注入组件控制器并遵循类似的逻辑来实现此功能：

$onInit() {

    this.$scope.currentNavItem = '/home';

    this.$rootScope.$on('$locationChangeSuccess', (event, current) => {
        this.$scope.currentNavItem = this.$location.path();
    });
}

我觉得这不是让它工作的最佳方式。

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

方法是使用controllerAs - CodePen

angular
  .module("MyApp", ["ngMaterial"])
  .component('test', {
    template: '<md-nav-bar md-selected-nav-item="vm.currentNavItem"><md-nav-item md-nav-sref="home" name="/home">Home</md-nav-item><md-nav-item md-nav-sref="about" name="/about">About</md-nav-item></md-nav-bar>',
    controller: function() {
      var vm = this;
      vm.$onInit = function() {
        vm.currentNavItem = "/home"
      }
    },
    controllerAs: "vm",
    bindToController: true
  });

John Papa controllerAs reference

【讨论】：