md-nav-bar mit eckigen 1,5 Komponenten

Question

Also ich versuche, die beste Praxis zu finden, Winkelmaterial mit eckigen 1,5 Komponenten zu verwenden und habe Mühe mit der Einrichtung der MD-Nav-Leiste speziell.

Hier ist ein codepen mit meinem aktuellen Code: http://codepen.io/anon/pen/QEQwaG?editors=1010

Hinweis, wie die Registerkarte Start nicht einmal gewählt ist, obwohl ich this.currentNavItem während des $ onInit Lifecycle Haken am initialisiert.

Ich würde erwarten, dass dies funktioniert, obwohl es wahrscheinlich etwas Vertrautheit mit der Funktionsweise des Komponentenbereichs gibt, der dieses Verhalten verursacht.

In meinem aktuellen Projekt (ES6/Babel), bekam ich diese Arbeit von $ Umfang an dem Component-Controller-Injektion und nach ähnlicher Logik:

$onInit() { 

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

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

Ich glaube, dass dies nicht der beste Weg ist, zu erhalten Arbeiten.

Answer 1

Die Art und Weise, es zu tun ist controllerAs zu verwenden - 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