angularjs – 针对父状态的角度ui-router解析

前端之家收集整理的这篇文章主要介绍了angularjs – 针对父状态的角度ui-router解析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在我父母的状态下,我有一个决心.目前,我没有在任何子状态下注入解析密钥.

我认为我的孩子状态不会等待这个决心/承诺得到解决.但是当我设置超时时,我可以看到我的孩子状态确实等待.

这是正确的行为吗?

.config(function ($stateProvider,$urlRouterProvider,STATES) {
    $stateProvider
        .state(STATES.ROOT,{
            abstract: true,template:'<div ui-view=""></div>',resolve: {                  
                UserService: 'UserService',userDetails: function(UserService){
                   return UserService.getUserProfile();
                }

            }
        })
        .state(STATES.BILLING,{
            url: '/bill/checkClientContext.html',templateUrl: 'bill/checkClientContext.html',controller: 'BillingController'
        })

UserService.js

'use strict';
angular.module('nabc.data')
    .service('UserService',['AjaxService','$timeout','$q',function(AjaxService,$timeout,$q) {
        var getUserProfile = function() {
            var promise = AjaxService.get('userProfile');

            var deferred = $q.defer();
            $timeout(function(response){
                deferred.resolve(response);
            },5000);
            return deferred.promise;


        };

        return {
            getUserProfile: getUserProfile
        };
    }]);

如您所见,BillingController不会注入userDetails.但是当我在userService中设置超时时,我发现我的计费状态确实等待了.

答案可以在这里找到(让我引用几行和片段):

Inherited Resolved Dependencies

版本0.2.0中的新功能

Child states will inherit resolved dependencies from parent state(s),which they can overwrite. You can then inject resolved dependencies into the controllers and resolve functions of child states.

$stateProvider.state('parent',{
      resolve:{
         resA:  function(){
            return {'value': 'A'};
         }
      },controller: function($scope,resA){
          $scope.resA = resA.value;
      }
   })
   .state('parent.child',{
      resolve:{
         resB: function(resA){
            return {'value': resA.value + 'B'};
         }
      },resA,resB){
          $scope.resA2 = resA.value;
          $scope.resB = resB.value;
      }

因此,正如我们在文档中看到的那样,父母的决心可以用于孩子.事实上这是理由,而我们必须等待这个问题得到解决……然后才能继续下去.

但我想说,这是预期的.更奇特的功能是:

if the child state has defined resolve – and parent does not – it would be great to see parent views rendered,and let only child’s views to wait.

这是(据我所知)在不久的将来计划作为一个功能……

EXTEND – 等待所有人继续是答案

得到答案:

Must all the resolves – declared in current state and all its parent states – be awaited to continue with current? Even if current state controllers do not require any of these values?

请遵守以下代码state.js

function resolveState(state,params,paramsAreFiltered,inherited,dst,options) {
  // Make a restricted $stateParams with only the parameters that apply to this state if
  // necessary. In addition to being available to the controller and onEnter/onExit callbacks,// we also need $stateParams to be available for any $injector calls we make during the
  // dependency resolution process.
  var $stateParams = (paramsAreFiltered) ? params : filterByKeys(state.params.$$keys(),params);
  var locals = { $stateParams: $stateParams };

  // Resolve 'global' dependencies for the state,i.e. those not specific to a view.
  // We're also including $stateParams in this; that way the parameters are restricted
  // to the set that should be visible to the state,and are independent of when we update
  // the global $state and $stateParams values.
  dst.resolve = $resolve.resolve(state.resolve,locals,dst.resolve,state);
  var promises = [dst.resolve.then(function (globals) {
    dst.globals = globals;
  })];
  if (inherited) promises.push(inherited);

  // Resolve template and dependencies for all views.
  forEach(state.views,function (view,name) {
    var injectables = (view.resolve && view.resolve !== state.resolve ? view.resolve : {});
    injectables.$template = [ function () {
      return $view.load(name,{ view: view,locals: locals,params: $stateParams,notify: options.notify }) || '';
    }];

    promises.push($resolve.resolve(injectables,state).then(function (result) {
      // References to the controller (only instantiated at link time)
      if (isFunction(view.controllerProvider) || isArray(view.controllerProvider)) {
        var injectLocals = angular.extend({},injectables,locals);
        result.$$controller = $injector.invoke(view.controllerProvider,null,injectLocals);
      } else {
        result.$$controller = view.controller;
      }
      // Provide access to the state itself for internal use
      result.$$state = state;
      result.$$controllerAs = view.controllerAs;
      dst[name] = result;
    }));
  });

  // Wait for all the promises and then return the activation object
  return $q.all(promises).then(function (values) {
    return dst;
  });
}

我决定在这里引用完整的方法,但最重要的部分是:var promises = [];的声明.这个数组后来扩展了继续promises.push所需的所有结算($resolve.resolve(…最后,直到所有的东西都没有完成,没有结果 – 返回$q.all(promises)

原文链接:https://www.f2er.com/angularjs/143225.html

猜你在找的Angularjs相关文章