router ui "resolve" doesn't resolve "returned deffered.promise"

Question

I have this angular js code:

app.js

        $stateProvider.state('home', {
            url: '/',
            component: 'homeComponent',
            params: {
                selectedFilter: undefined
            },
            resolve: {
                isAdOps: function (authorizationService) {
                    var ldapGroup = authorizationService.getLdapGroup();
                        //.then(
                    //     function(ldapGroup) {        return  ldapGroup === 'AdOps';},
                    //     function () { return true;}
                    // );

                    var isAdOps =  ldapGroup === 'AdOps';
                    console.log("isAdOps ?? "+isAdOps)
                    return isAdOps;
                }
            }
        })

and this authorizationService:

    var getLdapGroup = function () {
        var deferred = $q.defer();
        if (self.isInit) {
            deferred.resolve(self.isAdOps);
            }
        else {
            $http.get('api/Voices/getLdapGroup').then(
            function successCallback(response) {
                    self.isAdOps = response.data === 'AdOps';
                deferred.resolve(response.data);

            }, function errorCallback(response) {
                    var error = !response.data ? "empty_error": response.data.errorMsg;
                    console.log(error);
                self.isAdOps = true;
                deferred.reject("data: "+response.data+" code:"+response.status+" "+response.statusText+", please look at the web console");
            });
        }
        return deferred.promise;
    };

and this home-component:

(function (app) {
    app.component('homeComponent', {
        templateUrl: 'partials/home-partial.html',
        bindings: {
            isAdOps: '<'
        },
        controller: ['$scope', '$state', function ($scope, $state) {

            var self = this;

            console.log("self.isAdOps = " + self.isAdOps);
            self.isFullList = false;

Even though response.data === 'AdOps'

The home component is binded to isAdOps = false

how should i change the code?

Have you tried to add some breakpoints in your code? IMO, thread is getting into the controller before promise is resolved. Add a breakpoint in your resolved function and in your controller. Tell me if I'm right — IsraGab, Apr 08 '18 at 15:19
The code is a [deferred anti-pattern](https://stackoverflow.com/questions/30750207/is-this-a-deferred-antipattern). — georgeawg, Apr 08 '18 at 19:36

score 1 · Answer 1 · answered Apr 08 '18 at 15:17

1

You have to add the dependency to the resolved in your controller dependencies.

 controller: ['$scope', '$state', 'isAdOps', function ($scope, $state, isAdOps) {
...
}

answered Apr 08 '18 at 15:17

IsraGab

4,819
3
27
46

score 1 · Answer 2 · answered Apr 08 '18 at 15:23

1

this solved my problem:

resolve: {
                    isAdOps: function (authorizationService) {
                        return authorizationService.getLdapGroup();
                    }
                }

answered Apr 08 '18 at 15:23

Elad Benda2

13,852
29
82
157

Of course! It's because of the asynchronous behavior of the promise. var isAdOps = ldapGroup === 'AdOps'; is false because ldapGroup has a value and it's different to 'AdOps'. Thank's for the question :) – IsraGab Apr 08 '18 at 15:27

router ui "resolve" doesn't resolve "returned deffered.promise"

2 Answers2