使用Angular UI路由器呈現組件

Question

當我將url更改爲「/ nameDisplay」時，我似乎無法獲取我的'nameDisplay'組件。它不顯示任何錯誤，它只是不插入模板到UI視圖。如果我在'狀態'中使用模板而不是組件，那麼它可以工作，否則它不顯示任何內容。

我使用的版本是： 角 - 1.5.8 角UI路由器 - 直接在用戶界面路由器配置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; 

Answer 1

使用組件只能從UI路由器1.0工作。 0開啓。所以你應該升級到（目前還是）測試版，或者使用0.3.x樣式來使用<name-display></name-display>的模板包含組件。

見我的回答了類似的問題在這裏：Angular 1.5 - UI-Router, Resolve Object returning undefined values