Не могу получить состояние внука для работы с UI-маршрутизатором

Я использую Angular 1.6.2 и UI Router. Я все еще пытаюсь правильно изучить концепции, но пришел к дорожному блоку.Не могу получить состояние внука для работы с UI-маршрутизатором

У меня есть родительское состояние, которое называется app с использованием MainController и связкой дочерних состояний. Однако теперь я хочу идти на один уровень глубже, делая состояния внуков.

Следующие коды оставляют меня с пустой страницей при загрузке www.example.com/manage-users/edit/1, не загружая состояние бабушки и дедушки.

Однако он работает, если я делаю app родителем edit-users (тот, который я хочу сделать на третьем уровне), но это не совсем правильный путь. Потому что после этого мне нужно использовать родительские состояния по другим причинам.

index.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <base href="/"> 
    // loading JS/CSS etc 
</head> 
<body ng-app="sampleApp"> 
<div class="container"> 
    <div ui-view></div> 
</div> 
</body> 
</html>

parent.html

<div ng-controller="MainController as data"> 
    // more html 
    <div ui-view></div> 
</div>

управления-users.html

<div class="col-sm-12" ng-controller="UserController as data"> 
    // more html 
    <div ui-view></div> 
</div>

управляют пользователи-edit.html (работает только тогда, когда я делаю родительское состояние 'приложения' вместо 'Manage-пользователей

<div>Hello World! This is the Edit HTML Page</div>

app.js установки штатам

$stateProvider 
    .state('app', { 
     templateUrl: 'views/parent.html', 
     controller: 'MainController as data' 
    }) 
    .state('manage-users', { 
     parent: 'app', 
     url: '/manage-users', 
     templateUrl: 'views/manage-users.html', 
     controller: 'MainController as main' 
    }) 
    .state('edit-users', { 
     parent: 'manage-users', 
     url: '/manage-users/edit/:id', 
     templateUrl: 'views/manage-users-edit.html', 
     controller: 'MainController as main' 
    });

источник

2017-02-22 Adrian

Попробуйте это:

index.html

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <base href="/"> 
     // loading JS/CSS etc 
    </head> 
    <body ng-app="sampleApp"> 
     <div class="container" ui-view="container"></div> 
    </body> 
</html>

parent.html

<div ng-controller="MainController as data"> 
    // more html 
    <div ui-view="parent"></div> 
</div>

управления-users.html

<div class="col-sm-12" ng-controller="UserController as data"> 
    // more html 
    <div ui-view="manageusers"></div> 
</div>

app.js

$stateProvider 
    .state('app', { 
     views:{ 
      'container': { 
       templateUrl: 'views/parent.html', 
       controller: 'MainController as data' 
      } 
     } 
    }) 
    .state('app.manage-users', { 
     url: '/manage-users', 
     views:{ 
      'parent':{ 
        templateUrl: 'views/manage-users.html', 
        controller: 'MainController as main' 
       } 
     } 
    }) 
    .state('app.manage-users.edit-users', { 
     url: '/edit/:id', 
     views:{ 
      'manageusers':{ 
        templateUrl: 'views/manage-users-edit.html', 
        controller: 'MainController as main' 
       } 
     } 
    });

Вы всегда должны ориентироваться на ребенка вашего иерархия. В этом случае, $state.go('app.manage-users.edit-users')

EDIT:

Ваш URL собственности в состоянии конфигурации неправильно. Чтобы поразить то, что вы ожидаете, вы должны ввести http://exapmle.com/#/manage-users/edit/1.

Я обновил конфигурацию, поэтому удалены дополнительные управляющие пользователи из URL-адреса. Дать ему шанс.

источник

2017-02-23 10:13:51 mbeso

Благодарим за это, это помогло мне немного узнать и позиционировать мои 'ui-view' и т. Д., И я на самом деле применил вашу стратегию просмотров выше. Но, несмотря на все это, как только я скажу «edit-users», чтобы родитель, который не является 'app'it, терпит неудачу. – Adrian

ваш редактор заметил проблему! После этого он теперь работает, спасибо большое! – Adrian

Не могу получить состояние внука для работы с UI-маршрутизатором

ответ

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