Как перезагрузить вид ребенка без перезагрузки всего государства в AngularJS

Question

У меня есть состояние, которое имеет несколько представлений, заявленных в нем следующим образом:

$stateProvider 
    .state('home.details.item', { 
     url: '^/details', 
     views: { 
      'chartsView': { 
      templateUrl: 'charts.html', 
      controller: 'chartsCtrl' 
      }, 
      'gridView': { 
      templateUrl: 'grid.html', 
      controller: 'gridCtrl' 
      }, 
      'detailsView': { 
      templateUrl: 'details.html', 
      controller: 'detailsCtrl' 
      } 
     } 
     }); 

мне нужно перезагрузить один из взглядов без перезагрузки всего государства, без использования $state.go($state.current,null , {reload: true}), и, если возможно, от chartCtrl перезагрузить detailsCtrl. Это возможно?

Answer 1

Я бы сказал, что решение UI-Router должно быть построено arround *states*, а не виды.
(я создал working example here). Другими словами, если есть

• некоторые виды, которые должны не быть Reloaded и
• некоторые другие виды, которые должны быть перезагружается

... он требует государственной вложенности. Давайте перейдем эту точку зрения в состояние ребенка:

.state('home.details.item', { 
    url: '^/details', 
    views: { 
     'chartsView': { 
     templateUrl: 'tpl.charts.html', 
     controller: 'chartsCtrl' 
     }, 
     'gridView': { 
     templateUrl: 'tpl.grid.html', 
     controller: 'gridCtrl' 
     }, 
     // 'detailsView': { 
     // templateUrl: 'details.html', 
     // controller: 'detailsCtrl' 
     // } 
    } 
    }) 
    .state('home.details.item.more', { 
    views: { 
     'detailsView@home.details': { 
     templateUrl: 'tpl.details.html', 
     controller: 'detailsCtrl' 
     } 
    } 
    }) 

Нам также нужно государство, которое будет делать перезарядку. Мы могли бы использовать другой способ, например. с некоторым изменением параметра в состоянии more, но это означало бы изменить значение параметра для каждого вызова. При этом Specil состоянии, мы можем легко перезагрузить наше состояние 'more':

.state('reload', { 
    parent: "home.details.item", 
    views: { 
     'detailsView@home.details': { 
     // this controller will just redirect to 'more' and make it fresh... 
     controller: ['$state', function($state) { $state.go('^.more')}], 
     } 
    } 
}) 

И с этими простыми контроллерами мы можем сделать все, что требуется материал:

.controller('chartsCtrl', function ($scope, $state) { 
    var childName = ".more"; 
    $state.go(childName); // default is a sub state 'more' 
}) 
.controller('detailsCtrl', function ($scope) { 
    $scope.when = Date.now(); 
}) 

Имея это: мы можем назвать это перезагружать только детали:

<a ui-sref="reload">force reload detail view</a> 

Теперь при переходе на перезагрузку, мы будем перенаправлены заявить «более» и на наш взгляд, будет rerendered.

РЕЗЮМЕ:

В общем, интерфейс-маршрутизатор представляет собой конечный автомат. Я бы настоятельно рекомендую:

Не беспокойтесь думать states. Views - это просто их представление в DOM.

Если есть некоторые особенности, связанные, они скорее всего представляют состояние. Если другие не связаны (должны часто или редко меняться), они принадлежат другому государству. Он может быть родителем, ребенком или родным братом ...

Проверьте его here