Question

AngularJS 1.5.0带来了$ resolve属性，旨在简化将ngRoute解析数据传递到视图中，而无需为指令创建控制器。此属性也适用于常规视图。所以这有效：

(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>

但是，有些时候我有几个解析函数，我想在视图中使用之前传递给控制器进行变异。目前我做的事情如下：

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
}]);

编辑：

对于那些将来可能会发现这种情况的人，可以以不同的方式在您的控制器中访问此$ resolve对象：

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

因此决定在实例化控制器之前不附加$resolve。

还决定不做$resolve和注射。这可以使用$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()
        });
      }
    });
}

或者，如果您想拥有分叉版本，请参阅PR （$ scope。$在控制器之前解析）[https://github.com/angular/angular.js/pull/14135]

（$ resolve as injectable） [https://github.com/angular/angular.js/pull/14136]

Answer 1

在调用控制器和将$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中，控制器被实例化。

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

这是错误。在实例化控制器之前，$resolve属性没有理由放在范围上。

来自GitHub：

feat（ngView）：引用范围#13400
中已解析的本地化
路线的所有结算现在都附加到路线的本地范围，作为名称由resolveAs属性给出的属性路线定义。

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

通过能够引用所有内容，可以更轻松地使用ngRoute 路由的解析值，直接在范围上，而不是具有实现控制器只是为了手动复制解决方案。

例如，而不是

$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>' });

访问Angular路由范围属性$ resolve在控制器而不是视图中

1 个答案:

`$watch`

审查源代码

来自GitHub：

feat（ngView）：引用范围#13400