How can I call controller on ui-router resolve?

Question

This is what my ui-router looks like:

 .state('colleague', {
            url: "/colleague",

            templateUrl: "views/colleague.html",

            resolve: {
                typeEmployee: function ($q, $timeout) {
                    var deferred = $q.defer();
                    $timeout(function () {
                        deferred.resolve('manager');
                    }, 200);
                    return deferred.promise;
                }
                ,
                controller:  'colCtrl'
            }
        })

The issue is that I can't go to the collegue page:

<a ui-sref="colleague">colleague</a>

This is the controller code:

function colCtrl() {
    debugger;
    console.log('type of employee is:', typeEmployee);
    if (typeEmployee === 'colleague') {
        console.log('not allowed to view this');
    }

    if (typeEmployee === 'manager') {
        console.log('allowed to view this');
    }
}

app.controller('colCtrl', colCtrl);

When I grab the code from the controller and paste this directly into the router it works. What do I need to fix in the code so I can use 'controller:colCtrl' in my router?

Answer 1

You are using controller inside the resolve. You should move that to top level of state config object.

        .state('colleague', {
            url: "/colleague",

            templateUrl: "views/colleague.html",

            controller:  'colCtrl', // Notice its same level as resolve

            resolve: {
                typeEmployee: function ($q, $timeout) {
                    var deferred = $q.defer();
                    $timeout(function () {
                        deferred.resolve('manager');
                    }, 200);
                    return deferred.promise;
                }

            }
        })

Here is working plunkr with your example.

Answer 2

Problem is that, you need to mention the Controller as a variable, not as a string.

i.e.

controller: colCtrl

not

controller: 'colCtrl'