2016-08-11 5 views
1

Ich kann nicht scheinen, dass meine 'nameDisplay' Komponente angezeigt wird, wenn ich die URL zu '/ nameDisplay' ändere. Es zeigt keinen Fehler an, es fügt die Vorlage einfach nicht in die ui-view ein. Wenn ich die Vorlage im "Zustand" anstelle der Komponente verwende, funktioniert sie, sonst wird nichts angezeigt.Rendern einer Komponente mit dem Angular UI Router

Die Versionierung Ich verwende ist: Winkel - 1.5.8 Winkel ui Router - 0.3.1

angular.module('app.nameDisplay', [uiRouter]) 
.component('nameDisplay', { 
    controller: function(){ 
     this.name = "Keir Beckett"; 
     this.age = 24; 
     this.changeInfo = function(){ 
      this.name = "Golash Bista"; 
      this.age = 66; 
     } 
    }, 
    template: "" + 
     "<div>" + 
      "<h2>{{$ctrl.name}}</h2>" + 
      "<h4>{{$ctrl.age}}</h4>" + 
      "<button ng-click='$ctrl.changeInfo()'>Change Info</button>" + 
     "</div>" 
}).config(($stateProvider, $urlRouterProvider) => { 
    $stateProvider.state('nameDisplay', { 
     url: '/nameDisplay', 
     component: 'nameDisplay' 
    }) 
    .state("otherDisplay", { 
     url: '/otherDisplay', 
     template: '<h1>Other Display</h1>' 
    }); 
    $urlRouterProvider.otherwise('/'); 
}) 
.name; 
+1

ich nie 'component' als Eigenschaft eines' state' Objekt gesehen habe ... ist dies eine neue Syntax? In der Regel wird dies durch eine 'template: ''' erreicht. – Claies

Antwort

4

Komponenten direkt Verwendung in der ui-Router Konfiguration funktioniert nur aus ui-Router 1.0. 0 auf. Sie sollten also entweder auf die (derzeit noch) Beta-Version upgraden oder den 0.3.x-Stil verwenden, um Komponenten mit einer Vorlage für <name-display></name-display> einzubinden.

Siehe meine Antwort für eine ähnliche Frage hier: Angular 1.5 - UI-Router, Resolve Object returning undefined values