Почему добавление ключа url в объект состояния приводит к тому, что вложенное представление НЕ отображается?

Мой index.html имеет UI-вид, где я отображения greeting.html и greeting.html имеет UI-вид, где я пытаюсь отобразить greeting.planet.html:Почему добавление ключа url в объект состояния приводит к тому, что вложенное представление НЕ отображается?

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 не отображается. Зачем?

источник

2014-11-22 7stud

Я считаю, что каждое государство должно иметь «url», кроме родительского состояния. Потому что, используя только этот URL, маршрутизатор получает шаблон и ставит его в поле зрения. – Asik

@Asik, Спасибо, что посмотрели. Что вы думаете об этом: 1) https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-routing-for-nested-states и это: 2) https: // github .com/angular-ui/ui-router/wiki # activating-a-state – 7stud

... и это: 'Маршрутизация не была запоздалой мыслью к государственной механике, но была задумана в дизайне с самого начала (при сохранении состояний отдельно от маршрутизации URL) 'https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-routing-for-nested-states Если маршрутизация URL-адресов отделена от состояний, как добавить URL-адрес в состояние разбить код? – 7stud

Я создал 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 ... В любом случае, этот параметр полезен для обработки любого непреднамеренного состояния ... не забудьте передать URL-адрес существующему состоянию

ПРОДЛИТЕ: на основе комментариев, я создал еще больше "похожи" plunker here

наиболее важные изменения: угловая 1,3 и щ-маршрутизатор 0.2.13

<script data-require="[email protected]*" 
    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');

источник

2014-11-22 08:09:09

Ваш код работает с ui-router 0.2.11 ... но ваш код не является моим кодом. – 7stud

А это значит? Или просто записка? –

Я пытаюсь понять, почему мой код не работает.Ваше объяснение показалось, что я использую сломанную версию ui-router, но мой код не работает с версией 0.2.13. – 7stud

Почему добавление ключа url в объект состояния приводит к тому, что вложенное представление НЕ отображается?

ответ

Смежные вопросы