ui.router和多個視圖不工作

Question

我只是沒有得到ui.router，爲什麼我的意見不會顯示。我去/ manageservices abd儘管左側和右側html中有內容，但我什麼也沒有得到。

我的頁面，我想顯示一個左側和右側的視圖。

<!--/manageservices.html--> 
<div ng-controller="ManageServicesCtrl"> 
    <div ui-view="left"></div> 
    <div ui-view="right"></div> 
</div> 

<!--/left.html--> 
<div ng-controller="ManageServicesCtrl"> 
left 
</div> 

<!--/right.html--> 
<div ng-controller="ManageServicesCtrl"> 
right 
</div> 

我的配置文件：

ms.config(function($stateProvider, $urlRouterProvider,$locationProvider) {  
    $stateProvider 
    .state('manageservices', { 
     url: "/manageservices", 
     templateUrl: 'static/app/manage-services/manageservices.html', 
     controller: 'ManageServicesCtrl', 
     views: { 
      'left': { 
      templateUrl: 'static/app/manage-services/left.html', 
      controller: 'ManageServicesCtrl' 
      }, 
      'right': { 
      templateUrl: 'static/app/manage-services/right.html', 
      controller: 'ManageServicesCtrl' 
      } 
     }//end views 
    }) 

}) 

下面是螢火蟲。我在兩頁上都收到200，但內容沒有顯示。

GET http://127.0.0.1:5000/static/app/manage-services/right.html 

304 NOT MODIFIED 
     192ms 
angular.min.js (line 93) 

GET http://127.0.0.1:5000/static/app/manage-services/left.html 

304 NOT MODIFIED 
     192ms 
angular.min.js (line 93) 




Error: Cannot transition to abstract state 'manageservices' 
v/y.transitionTo@http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js:7:16913 
v/y.go@http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js:7:16389 
D/<.link/</e<@http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js:7:24861 
f/m<@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:146:220 
e@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:43:93 
Kf/l.defer/c<@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:45:491 

http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js 
Line 107 

Answer 1

Views override state's template properties

If you define a views object, your state's templateUrl, template and templateProvider will be ignored. So in the case that you need a parent layout of these views, you can define an abstract state that contains a template, and a child state under the layout state that contains the 'views' object.

您需要創建一個抽象父。見example

$urlRouterProvider.otherwise("manageservices"); 
    $stateProvider 
    .state('manageservices', { 
     abstract : true, 
     templateUrl: 'managedservices.html', 
     controller: 'ManageServicesCtrl' 
    }) 
    .state('manageservices.main', { 
     url: "/manageservices", 
     views: { 
     'left': { 
      templateUrl: 'left.html', 
      controller: 'ManageServicesCtrl' 
     }, 
     'right': { 
      templateUrl: 'right.html', 
      controller: 'ManageServicesCtrl' 
     } 
     } //end views 

    }) 

PS。從HTML中刪除ng-controller="ManageServicesCtrl"。您已經在配置中定義了控制器！