Шаблон UI Router не вводится, но изменения состояния Изменения

Question

Я пытаюсь сделать вложенные представления, вот плункер https://embed.plnkr.co/oRMnMW4QoWwhSkm9maHf/. Состояние изменяется, но шаблон не изменяется.

Может кто-нибудь исправить меня, что я сделал неправильно

Goto Ссылка> Второй Вложенный.

При нажатии кнопки состояние успешно изменяется, но содержимое не вводится. Я хочу, чтобы содержание ссылки на этой странице, чтобы быть заменено вторым вложенным содержанием

Answer 1

Try поставить абстрактным: истинное на «отец» корня, как:

var routerApp = angular.module('routerApp', ['ui.router','ncy-angular-breadcrumb']); 

routerApp.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/home/list'); 

    $stateProvider 

     // HOME STATES AND NESTED VIEWS ======================================== 
     .state('home', { 
      url: '/home', 
      abstract: true, 
      templateUrl: './partial-home.html' 
     }) 

     // nested list with custom controller 
     .state('home.list', { 
      url: '/list', 
      templateUrl: './partial-home-list.html', 
      controller: function($scope) { 
       $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle']; 
      } 
     }) 
     .state('home.second', { 
      url: '/second', 
      templateUrl: './second.html', 
     }); 
}); 

routerApp.run(['$rootScope', '$state', function ($rootScope, $state) { 
      $rootScope.$on('$stateChangeStart', function (event, toState) { 
       console.log("state Change") 
      }); 
     }]); 

но .. Помните, если вы поставите аннотацию: правда .. url не является реальным .. это префикс .. или как я его называю .. отец другой маршрутизации ..так вы не можете называть это в .otherwise()

И в вашей ссылке (и маршрутизации) второго вида .. просто удалите .list ... так вот так:

.state('home.second', { //<-- HERE .. REMOVE THE .list 
       url: '/second', 
       templateUrl: './second.html', 
      }); 

и в ссылке:

// AND HERE .. 

<a ui-sref="home.second" class="btn btn-danger">Second Nested</a> 

Answer 2

Ответ довольно прост - вы инициализация 3-го уровня вложенности состояний, но в ./partial-home-list.html у Вас есть не добавить ui-view директивы.

Добавить <ui-view></ui-view> в ./partial-home-list.html, и вы увидите, что он работает так, как вы определили.

Если вы хотите отобразить home.list.second как отдельные страницы, то определить второе состояние, как этот

.state('home.second', { 
      url: '/home/list/second', 
      templateUrl: 'second.html', 
     }); 

Не забудьте обновить пользовательский интерфейс-sref к home.second на кнопку

-

Просто чтобы получить вложенную пачку, у меня нет «хорошего» решения, но он будет работать.

-- Partial home list html 
    <div ng-if="state.current.name != 'home.list.second'"> 
    <ul> 
    <li ng-repeat="dog in dogs">{{ dog }}</li> 
    </ul> 
<div ncy-breadcrumb></div> 
<a ui-sref="home.list.second" class="btn btn-danger">Second Nested</a> 
</div> 

<ui-view></ui-view> 

App js 
// nested list with custom controller 
     .state('home.list', { 
      url: '/list', 
      templateUrl: 'partial-home-list.html', 
      controller: function($scope, $state) { 
       $scope.state = $state; 
       $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle']; 
      } 
     }) 
     .state('home.list.second', { 
      url: '/second', 
      templateUrl: 'second.html', 
     });