CODEWITHSUNDEEP
angularjs
Pablo Vivera
Pablo Vivera

Reputation: 43

Route controller resolve mixed up

I've a problem with 2 resolves, one for each controller.

http://jsfiddle.net/pvivera/RhAHy/

var app = angular.module('testApp', [], function($routeProvider){
    $routeProvider.when('/', {
        template: 'Home {{model}}',
        controller: 'HomeCtrl',
        resolve: HomeCtrl.resolve
    })
    .when('/About', {
        template: 'About {{model}}',
        controller: 'AboutCtrl',
        resolve: AboutCtrl.resolve
    });
});

var HomeCtrl = app.controller('HomeCtrl', function($scope, HomeCtrlData){
    $scope.model = HomeCtrlData;
});

HomeCtrl.resolve = {
    HomeCtrlData: function($q, $timeout){
        var deferred = $q.defer();
        $timeout(function(){
            return deferred.resolve('AboutCtrlResolver');
        }, 2000);
        return deferred.promise;
    }
};

var AboutCtrl = app.controller('AboutCtrl', function($scope, AboutCtrlData){
    $scope.model = AboutCtrlData;
});

AboutCtrl.resolve = {
    AboutCtrlData: function($q, $timeout){
        var deferred = $q.defer();
        $timeout(function(){
            return deferred.resolve('AboutCtrlResolver');
        }, 2000);
        return deferred.promise;
    }
};

In the jsfiddler script, when the HomeCtrl want to resolve HomeCtrlData I receive this error Unknown provider: HomeCtrlDataProvider <- HomeCtrlData

If I change HomeCtrlData to AboutCtrlData in the HomeCtrl everything works, it seems that the only resolve that is assigned is AboutCtrl.resolve

Any idea?

Upvotes: 2

Views: 1915

Answers (1)

Anders Ekdahl
Anders Ekdahl

Reputation: 22933

The problem here is that app.controller() doesn't return the controller, it returns your application module. So you're assigning app.resolve twice, which is why it doesn't work for one of them.

I would suggest that you inline the resolve function like this instead:

var app = angular.module('testApp', [], function($routeProvider){
    $routeProvider.when('/', {
        template: 'Home {{model}}',
        controller: 'HomeCtrl',
        resolve: {
            HomeCtrlData: function($q, $timeout) {
                var deferred = $q.defer();
                $timeout(function(){
                    return deferred.resolve('HomeCtrlData');
                }, 2000);
                return deferred.promise;
            }
        }
    })
    .when('/About', {
        template: 'About {{model}}',
        controller: 'AboutCtrl',
        resolve: {
            AboutCtrlData: function($q, $timeout) {
                var deferred = $q.defer();
                $timeout(function(){
                    return deferred.resolve('AboutCtrlData');
                }, 2000);
                return deferred.promise;
            }
        }
    });
});

Upvotes: 3

Related Questions