Хотите обновить значения родительского представления из дочернего представления с помощью UI-Router

Question

Я новичок в AngularJS и использую Angular UI-Router для своего SPA.

Я пытаюсь обновить значения родительского представления из дочернего представления. Я просмотрел документацию UI-Router для Nested Views и Multiple Views, но не смог найти способ обновить значения.

Мой пример использования: родительский вид будет заголовком, и каждый раз, когда дочерний вид изменяется через переход состояния, я хочу обновить значение заголовка, которое является частью родительского вида.

Код:

HTML-файл -

<div ui-view></div>

Файл JS, в котором происходит конфигурация Angular UI-Routing -

angular.module('myApp', ['ui.router']).config(['$stateProvider', '$routeProvider',
function($stateProvider, $routeProvider) {
  $stateProvider
    .state('main', {
      resolve: {
        resA: function() {
          return {
            'value': 'Hello !!'
          };
        }
      },
      controller: function($scope, resA) {
        $scope.resA = resA.value;
      },
      abstract: true,
      url: '/main',
      template: '<h1>{{resA}}</h1>' +
        '<div ui-view></div>'
    })
    .state('main.one', {
      url: '/one',
      views: {
        '@main': {
          template: "Im View One"
        }
      },
      resolve: {
        resB: function(resA) {
          return {
            'value': resA.value + ' from One'
          };
        }
      },
      controller: function($scope, resA, resB) {
        $scope.resA = resB.value;
      }
    }).state('main.two', {
      url: '/two',
      views: {
        '@main': {
          template: '<div ui-view="sub1"></div>' +
            '<div ui-view="sub2"></div>'
        },
        '[e-mail]': {
          template: "Am awesome"
        },
        '[e-mail]': {
          template: "Am awesome two/too"
        }
      },
      resolve: {
        resC: function(resA) {
          return {
            'value': resA.value + ' from Two'
          };
        }
      },
      controller: function($scope, resA, resC) {
        $scope.resA = resC.value;
      }
    });
}]).run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.transitionTo('main.two');
}]);

Вот ссылка JS Fiddle того же фрагмента кода.

Answer 1

Есть несколько способов обновить родительскую область.

1. Использование контроллера как https://jsfiddle.net/9n7wrevt/17/

     controller: function($scope, resA) {
       this.resA = resA.value;
     },
     controllerAs: 'main'
   

   ссылаясь на родителя, как показано ниже

   контроллер: функция ($scope, resB) { $scope.main.resA = resB.value; }

2. Использование $ parent https://jsfiddle.net/9n7wrevt/18/

   контроллер: функция ($scope, resB) { $scope.$parent.resA = resB.value; }

3. Лучший способ (настоятельно рекомендуется) - использовать $scope $emit, $on для связи между контроллерами. https://jsfiddle.net/9n7wrevt/19/