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

如果你定义了一个视图对象，你的状态是templateUrl，模板和   templateProvider将被忽略。所以在你需要的情况下   这些视图的父布局，可以定义一个抽象状态   包含一个模板，以及布局状态下的子状态   包含'views'对象。

您需要创建一个抽象父级。见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"。您已在配置中定义了控制器！

ui.router和多个视图无效

1 个答案: