Как сделать вложенные state в angular?

Question

[Роман Волков]

Есть код

$stateProvider
    .state('app', {
      abstract: true,
      name: 'app',
    })
    .state('routes', {
      url: "/routes/:id",
      templateUrl: "/templates/routes/show.html",
      controller: 'route-show-ctrl'
    })

    .state('routes.edit', {
      url: "/edit/",
      templateUrl: "/templates/routes/edit.html",
      controller: 'route-edit-ctrl'
    })

Как я понял, при редактировании, должна отображаться вьюха, но отображается вьюха родительского компонента

Comments

[Максим Нагаев]

В конце url должен быть слеш, иначе edit будет параметром и будет отображаться первая вьюха

Answer 1

[volyihin]

Стейт routes не абстрактный. abstract: true нужен, чтобы ui-router понял, что у данного стейта есть дочерние стейты.

Пример

$stateProvider
    .state('contacts', {
        abstract: true,
        url: '/contacts',
        templateUrl: 'contacts.html',
        controller: function($scope){
            $scope.contacts = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }];
        }           
    })
    .state('contacts.list', {
        url: '/list',
        templateUrl: 'contacts.list.html'
    })
    .state('contacts.detail', {
        url: '/:id',
        templateUrl: 'contacts.detail.html',
        controller: function($scope, $stateParams){
          $scope.person = $scope.contacts[$stateParams.id];
        }
    })

<!-- contacts.html -->
<h1>Contacts Page</h1>
<div ui-view></div>

<!-- contacts.list.html -->
<ul>
    <li ng-repeat="person in contacts">
        <a ng-href="#/contacts/{{person.id}}">{{person.name}}</a>
    </li>
</ul>