CODEWITHSUNDEEP
angularjsangularjs-scope
MadzQuestioning
MadzQuestioning

Reputation: 3772

Get resolve variable and pass to controller

Hi I created a model named billerModel and a route that has a resolve with a variable of billers. Now I want to retrieve and assign this variable inside my controller but I get this billerData unknown provider error. Below are my code for the route:

app.config(["$routeProvider", "$httpProvider",'$locationProvider',function($routeProvider, $httpProvider, $locationProvider) {

$routeProvider
    .when("/billers", {
        templateUrl: 'admin/billers/index.html',
        controller: 'billerController',
        resolve: {
            billerData: function(billerModel) {
                return billerModel.getData();
            }
        }
    });

Below is my code for the model

app.factory('billerModel', ['$http', '$cookies', function($http, $cookies) {
    return {
      getData: function() {
        return $http({
            method: 'GET',
            url: 'billers'
        });
      }
    }
}]);

Below is my controller code that gives me the error

app.controller('billerController', ['$scope', 'billerData',  
   function($scope, billerData){
       $scope.billers = billerData;

}]);

I also tried to remove the ng-controller from my view but if I do this then I get an error of unknown variable

<div style="text-align: left;" ng-controller="billerController">
    {{ billers }}
</div>

enter image description here

Below is a jsfiddle but I'm not familiar on how to use it but the basic structure is included here https://jsfiddle.net/bd06cctd/1/

Upvotes: 3

Views: 5265

Answers (2)

georgeawg
georgeawg

Reputation: 48968

Resolve data in .when blocks is only injectable into controllers defined by the .when block. Child controllers injected by the ng-controller directive can not inject resolve data.

Also if you inject billerController in the .when block and with the ng-controller directive in the .when block template, then the controller will be instantiated twice.

The $routeProvider also makes resolve data available on the view scope on the $resolve property. Child controllers instantiated by the ng-controller directive can use that.

app.controller('childController', ['$scope',  
   function($scope){
       $scope.billers = $scope.$resolve.billerData;
}]);

Controllers instantiated by the ng-controller directive will find the $resolve property by prototypical inheritance from the view scope.

From the Docs:

  • resolve - {Object.<string, Function>=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected and $routeChangeSuccess event is fired. If any of the promises are rejected the $routeChangeError event is fired. For easier access to the resolved dependencies from the template, the resolve map will be available on the scope of the route, under $resolve (by default) or a custom name specified by the resolveAs property.

-- AngularJS $routeProvider API Reference

Upvotes: 2

nikjohn
nikjohn

Reputation: 21910

Could you try changing:

app.factory('billerModel', ['$http', '$cookies', function($http, $cookies) {
return {
  getData: function() {
    return $http({
        method: 'GET',
        url: 'billers'
    });
  }
}
}]);

to 

app.factory('billerModel', ['$http', '$cookies', function($http, $cookies) {
    return {
      getData: $http({
            method: 'GET',
            url: 'billers'
        });
    }
}]);

You're returning an anonymous function, not a Promise

Upvotes: 0

Related Questions