AngularJS - View gets undefined data from StateProvider

Question

I'm trying to send an object to my view from the stateProvider in my AngularJS application. The state does resolve the object and sends it, however in the view the object is suddenly undefined. How can this be?

StateProvider

 ...
 .state('view', {
        url: '/view/:view',
        templateUrl: urlBase + 'views/view.html',
        controller: 'viewController',
        resolve: {
            view: function ($stateParams, sharedProperties) {
                sharedProperties.getConfig(sharedProperties)
                    .then(function(response){
                        var config = response.data;

                        console.log('config :', config);

                        for (var i = 0; i < config.views.length; i++) {
                            if (config.views[i].route === $stateParams.view) {
                                console.log('jackpot : ', config.views[i]);
                                return config.views[i];
                            }
                        }

                        return undefined;
                    })
                    .catch(function(error){
                        console.log('Error : ', error);
                        return undefined;
                    });
            }
        }
    })
...

view

angular.module('app')
.controller('viewController', ['$scope', '$state', '$interval', '$window', 'view', 'socketService', 'userService', 
  function ($scope, $state, $interval, $window, view, socketService, userService) {
    console.log('view : ', view);

    var user = userService.get();

    //  If there is no view, return to login page
    if (view === undefined) {
        $state.go('welcome');
    }

    /*
     *  Sets the models to be used in the view
     */
    $scope.values = view.values;
...

shareProperties service

app.factory('sharedProperties', function ($http) {
    var service = {};

    service.getConfig = function () {
        return $http.get('config.json');
    };

    return service;
});

Console log

config : Object {socketAddress: "ws://localhost:8081/Common",   IISProjectName: "simplanner", views: Array[1]} core.js:67
jackpot :  Object {route: "Arbejds Tider", viewFunctions: Object, storedProcedure: Object, values: Array[5]} view.controller.js:3
view : undefined

angular.min.js:107 TypeError: Cannot read property 'values' of undefined
    at new <anonymous> (http://localhost:8080/simplanner/scripts/controllers/view.controller.js:15:29)
    at e (http://localhost:8080/simplanner/lib/Angular-1.4.7/angular.min.js:39:193)
    at Object.instantiate (http://localhost:8080/simplanner/lib/Angular-1.4.7/angular.min.js:39:310)
    at http://localhost:8080/simplanner/lib/Angular-1.4.7/angular.min.js:80:313
    at http://localhost:8080/simplanner/lib/Angular-1.4.7/angular-ui-router.min.js:7:28006
    at aa (http://localhost:8080/simplanner/lib/Angular-1.4.7/angular.min.js:73:90)
    at K (http://localhost:8080/simplanner/lib/Angular-1.4.7/angular.min.js:62:39)
    at g (http://localhost:8080/simplanner/lib/Angular-1.4.7/angular.min.js:54:410)
    at http://localhost:8080/simplanner/lib/Angular-1.4.7/angular.min.js:53:480
    at k (http://localhost:8080/simplanner/lib/Angular-1.4.7/angular-ui-router.min.js:7:27219) <div ui-view="" class="ng-scope">
(anonymous function) @ angular.min.js:107
(anonymous function) @ angular.min.js:80
aa @ angular.min.js:73
K @ angular.min.js:62
g @ angular.min.js:54
(anonymous function) @ angular.min.js:53
k @ angular-ui-router.min.js:7
(anonymous function) @ angular-ui-router.min.js:7
n.$broadcast @ angular.min.js:136
y.transition.M.then.y.transition.y.transition @ angular-ui-router.min.js:7
(anonymous function) @ angular.min.js:119
n.$eval @ angular.min.js:133
n.$digest @ angular.min.js:130
n.$apply @ angular.min.js:133
h @ angular.min.js:87
K @ angular.min.js:91
z.onload @ angular.min.js:93

Radim Köhler · Accepted Answer · 2015-11-06 14:43:39Z

2

The factory sharedProperties has a method/function getConfig() - which result we want. So we have to return it:

...
resolve: {
    view: function ($stateParams, sharedProperties) {
        // instead of just a call
        // sharedProperties.getConfig(sharedProperties)

        // we need to return that result
        return sharedProperties.getConfig(sharedProperties)

            .then(function(response){
            ...

answered Nov 6, 2015 at 14:43

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Tot Korsgaard Over a year ago

That's it. I'll tig this as the solution in 9 minutes ^^

Radim Köhler Over a year ago

Great to see that Michael ;) Enjoy mighty UI-Router ;)

Collectives™ on Stack Overflow

AngularJS - View gets undefined data from StateProvider

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related