angularjs - 在 Controller 而不是 View 中访问 Angular 路由范围属性 $resolve

Question

AngularJS 1.5.0 带来了 $resolve 属性，旨在更轻松地将 ngRoute 解析数据传递到 View 中，而无需为指令创建 Controller 。此属性也适用于常规 View 。所以这有效:

(function() {
  function ConfigureRoutes($routeProvider) {
    $routeProvider.
      when('/test', {
        templateUrl: 'test.html',
        controller: 'TestController',
        controllerAs: 'vm',
        resolve: {
          'stuff': ['$q', function($q) {
            return $q.when([
              { id: 1, name: 'John' },
              { id: 2, name: 'Jake' }
            ]);
          }]
        });
      }
      app.config(['$routeProvider', ConfigureRoutes]);
})();


<pre>{{ $resolve.stuff | json }}</pre>

但是，有时我想在 View 中使用之前将几个解析函数传递给 Controller ​​以进行变异。目前我做类似的事情:

when('/test', {
  ...
  resolve: {
    'stuff_1': ...
    'stuff_2': ...
  }
});

app.controller('StuffController', ['stuff_1', 'stuff_2', function(stuff_1, stuff_2) {
  this.stuff_1 = stuff_1;
  this.stuff_2 = stuff_2;
}]);

有没有一种方法可以访问这个新的 $resolve 属性而不必单独访问参数？我试过了:

app.controller('StuffController', ['$scope', function($scope) {
  this.stuff_1 = $scope.$resolve.stuff_1; // $scope.$resolve == undefined
}]);

app.controller('StuffController', ['$resolve', function($resolve) {
  this.stuff_1 = $resolve.stuff_1; // injector error
}]);

编辑:

对于那些将来可能会发现它的人，您可以在 Controller 中以不同的方式访问此 $resolve 对象:

app.controller('TestController', function($route) {
  this.$resolve = $route.current.locals;
});

所以决定不附加 $resolve在实例化 Controller 之前。

也决定不做$resolve和可注入(inject)的。这可以使用 $q.all() 来实现作为单个解析函数，如下所示:

function config($routeProvider) {
  $routeProvider.when('/',
    controller: 'TestController',
    controllerAs: 'vm',
    template: 'test.html',
    resolve: {
      $resolve: function($q) {
        return $q.all({
          local_1: $q.when(),
          local_2: $q.when()
        });
      }
    });
}

或者，如果您想要一个 fork 版本，请参阅 PR
($scope.$resolve 在 Controller 之前)[ https://github.com/angular/angular.js/pull/14135]

($resolve 为可注入(inject)的)
[ https://github.com/angular/angular.js/pull/14136]

Answer 1

在调用 Controller 和将 $resolve 属性置于作用域之间显然存在延迟。

angular.module("myApp").controller("test", function($scope, $timeout) {
    var vm = $scope;
    console.log("test controller")
    //console.log(vm);
    console.log("$resolve=",$scope.$resolve);  //Undefined
    $timeout(function() {
         console.log("timeout $resolve");
         console.log("$resolve=",$scope.$resolve); //Defined
    });
});

使用 $timeout ，值解析。

DEMO on JSFiddle 。
$watch 示例

angular.module("myApp").controller("test", function($scope) {
    var vm = $scope;
    console.log("test controller")
    console.log(vm);
    console.log("$resolve=", $scope.$resolve); //Undefined
    $scope.$watch("$resolve", function(value) {
         console.log("watch $resolve");
         console.log(value); //Defined
    });
});

使用 $watch ，值解析。

DEMO on JSFiddle 。

源代码审查

在 ngView.js Line #273 中， Controller 被实例化。

在 ngView.js Line #280 中，将 $resolve 属性放在范围内。

这是一个 错误 。在 实例化 Controller 之前，没有理由不能将 $resolve 属性放在范围 上。

来自 GitHub:

壮举(ngView):引用范围#13400中已解析的本地人

路由的所有解析现在都附加到路由的本地范围，
作为其名称由 resolveAs 属性给出的属性
路线定义。

如果未指定 resolveAs ，则默认为 $resolve 。

这将使 ngRoute 更容易使用，因为它能够引用所有
路由的解析值，直接在作用域上，而不是
实现一个 Controller 只是为了手动复制解析。

例如，而不是

$routeProvider.when('/', {
  resolve: {
    item1: ($http) => $http.get(...),
    item2: ($http) => $http.get(...)
  },
  template: '<my-app item1="vm.item1" item2="vm.item2"></my-app>',
  controllerAs: 'vm',
  controller: ['item1', 'item2', function(item1, item2) {
    this.item1 = item1;
    this.item2 = item2;
  }]
});

现在可以做

$routeProvider.when('/', {
  resolve: {
    item1: ($http) => $http.get(...),
    item2: ($http) => $http.get(...)
  },
  template: '<my-app item1="$resolve.item1" item2="$resolve.item2"></my-app>'
});