web-dev-qa-db-ja.com

ui-routerresolveで$ scopeを使用する

サービスからデータを取得するためにui-routerresolveを使用しています。

以下に示すように、サービスを呼び出すには、親の$ scopeから値を取得する必要があります。

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

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!を取得し続けます

また、以下に示すように、解決オブジェクトにスコープを追加するなど、いくつかの必死の試みを試みましたが、成功しませんでした。

_scope: $scope
_

何か案は？

angularjsangularjs-scopeangular-ui-router
15
Loukas Avramidis

それは不可能です。スコープはその時点で初期化されていないため、resolveオブジェクトで使用することはできません。初期化された後、コントローラーのスコープにアクセスできます。解決の全体的なポイントは、スコープ内の解決されたアイテムを挿入して直接アクセスできるように、beforeコントローラーの初期化を実行することです。

変数を次の状態に渡す必要がある場合は、resolveで使用できる$stateParamsオブジェクトを使用してそれを行うことができます。状態を変更するときにデータを追加できます。例：

テンプレートで、スコープにobjectIdがある場合：

<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);
    }
}
19
iH8

同じリソースに対してサーバーへの別のラウンドトリップが必要な、受け入れられたソリューションの代替手段として（サーバー/ 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: '...',
    });
}
0
redben