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

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)