Использование $scope в решении ui-router

Я использую разрешение ui-router, чтобы получить некоторые данные из службы.

Дело в том, что мне нужно получить значение из родительской области $, чтобы вызвать службу, как показано ниже.

resolve: {
              contactService: 'contactService',
              contacts: function ($scope, contactService) {
                  return contactService.getContacts($scope.parentCtrl.parentObjectId);
              }
          }

Я продолжаю получать Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

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

scope: $scope

Любые идеи?

Ответ 1

Это невозможно, область не была инициализирована в этот момент, поэтому вы не можете использовать ее в объекте разрешения. После инициализации вы можете получить доступ к области в контроллере. Весь смысл заключается в том, что он запускается до инициализации контроллера, чтобы вы могли вводить и напрямую обращаться к разрешенным элементам в своей области.

Если вам нужно передать переменную в следующее состояние, вы можете сделать это, используя объект $stateParams, доступный для использования в разрешении. Вы можете добавлять к нему данные при изменении состояний, например:

В вашем шаблоне, если у вас есть объект в вашей области действия:

<a ui-sref="statename({'id': objectId})">Change states</a>

Или в вашем контроллере:

$scope.go('statename', {'id': $scope.objectId});

Затем вы можете получить это в своем решении, используя $stateParams:

resolve: {
    contactService: 'contactService',
    contacts: function ($stateParams, contactService) {
        return contactService.getContacts($stateParams.id);
    }
}

Ответ 2

В качестве альтернативы принятому решению, которое требует другого обратного перехода к серверу для одного и того же ресурса (если вы получаете значение с сервера /api ), вы могли бы $watch родителя от дочернего контроллера.

function ParentController($http) {
  var vm = this;
  $http.get(someResourceUrl).then(function(res) {
    vm.someResource = res.data;
  });
}

function ChildController($scope) {
  // wait untill the parent gets the value
  var unwatch = $scope.$watch('parent.someResource', function(newValue) {
    if (newValue) {
      // the parent has the value, init this controller
      init(newValue);
      // dispose of the watcher we no longer need
      unwatch();
    }
  });
  function init(someResource) {
    // ... do something
  }
}

function routerConfig($stateProvider) {
  $stateProvider
    .state('parent', {
      url: '/parent',
      controller: 'ParentController',
      controllerAs: 'parent',
      templateUrl: '...',
    })
    .state('parent.child', {
      url: '/child',
      controller: 'ChildController',
      controllerAs: 'child',
      templateUrl: '...',
    });
}