Access Angular route area property $ allow inside controller instead of view

Question

AngularJS 1.5.0 provides the $ solve property, which is designed to simplify the transfer of ngRoute permission data to a view without the need for a controller for directives. This property also works for normal views. So this works:

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

However, there are times when I have several solution functions that I want to pass to the controller in order to mutate before being used in the view. I am currently doing something like:

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

Is there a way to access this new $ resol property without having to access the parameters separately? I tried:

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

EDIT:

, , $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]

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