Question

我的index.html有一个ui-view，我在其中显示greeting.html，greeting.html有一个ui-view，我试图显示greeting.planet.html：

greeting.planet.html：

<div>world!</div>

greeting.html：

<div>Hello</div>
<div ui-view></div>  #NESTED VIEW HERE************

的index.html：

<!DOCTYPE html>
<html ng-app="myapp">  #APP DIRECTIVE HERE************

<head>
  <title>Test</title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="app.css" rel="stylesheet">

</head>

<body ng-controller="MainCtrl">  #MainCtrl CONTROLLER HERE*********

<div class="container">
  <div class="jumbotron text-center">
    <h1>Test App</h1>
  </div>
</div>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <div ui-view></div>   #NESTED VIEW HERE**********
  </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>
<script src="app.js"></script>
</body>
</html>

当我导航到http://localhost:4444/index.html时，以下代码成功显示嵌套视图：

app.js：

var app = angular.module("myapp", ['ui.router']);

app.config([
'$urlRouterProvider',
'$stateProvider',
function($urlRouterProvider, $stateProvider) {
  $urlRouterProvider.otherwise('greeting');

  $stateProvider
    .state('greeting', {
      //url: '/greeting',
      templateUrl: 'greeting.html'
    })

    .state('greeting.planet', {
      //url: '/planet',
      templateUrl: 'greeting.planet.html'
    });

}]);

app.controller('MainCtrl', ['$state', function($state) {
  $state.transitionTo('greeting.planet');
}]);

但如果我取消注释状态中的url键，那么greeting.planet.html就不会显示。为什么呢？

Answer 1

我使用你的状态定义创建了一个plunker here - 使用url：

$stateProvider
    .state('greeting', {
      url: '/greeting',
      templateUrl: 'greeting.html'
    })

    .state('greeting.planet', {
      url: '/planet',
      templateUrl: 'greeting.planet.html'
    });

它正在发挥作用。检查here

重要的是，我使用了最新的version of to UI-Router 0.2.13 （修复了一些问题，只是总是使用最新的）

我还删除了$urlRouterProvider.otherwise('greeting'); - 冗余设置。它应该导航到默认URL，而不是状态名称。所以它适用于$urlRouterProvider.otherwise('/greeting'); ...但是默认导航是在你的示例中完成的 MainCtrl ...无论如何，这个设置很有用，可以处理任何非预期的状态......不要忘记将网址传递给现有状态

EXTEND：根据评论，我创造了更多＆＃34;类似的＆＃34; plunker here

最重要的变化是：角度1.3 和 ui-router 0.2.13

<script data-require="angular.js@*" 
     data-semver="1.3.1" 
     src="//code.angularjs.org/1.3.1/angular.js"></script>
<script src="ui-router.js"></script> // 0.2.13

并使用显式重定向：$urlRouterProvider.otherwise('/greeting/planet');

为什么向状态对象添加url键导致嵌套视图不显示？

1 个答案: