md-nav-bar 使用 angular 1.5 组件

Question

所以我试图找出将 angular-material 与 angular 1.5 组件一起使用的最佳实践，并且正在努力专门设置 md-nav-bar .

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

请注意，尽管我在 $onInit 生命周期挂钩期间初始化 this.currentNavItem，但“主页”选项卡未被选中。

我希望它能起作用，尽管可能对组件作用域的工作方式有些不熟悉导致了这种行为。

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

$onInit() {

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

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

我觉得这不是实现此功能的最佳方式。

Answer 1

方法是使用controllerAs - CodePen

JS

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

md-nav-bar 使用 angular 1.5 组件

md-nav-bar using angular 1.5 components

angularjs

angular-material