Angular ui_router $stateProvider resolve doesn't return data to controller

Question

I am using angular ui-router for an ionic application and here is my code. problem is controller initialization happens before the Level1Protocols could send data. What am I doing wrong?

     $stateProvider
 .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })
  .state('tab.home', {
    url: '/home',
    views: {
      'tab-home': {
            resolve: {
              Level1Protocols: ["Level1", "Protocol",function (Level1, Protocol) {
                  var protocolData = [],
                      protocol = new Protocol.Protocol(),
                      detailData = {};

                  Level1.loadProtocolData().success(function (response) {
                      for (var i = 0; i < response.length; i++) {
                          protocol.title = response[i].Title;
                          protocol.level = 1;
                          protocol.icon = Level1.getImageFromArray(response[i].Title);
                          protocolData.push(protocol);
                      }
                      console.log(protocolData);
                      return protocolData;
                  });

              }]
          },          
          templateUrl: 'templates/tab-home.html',
          controller: ["$scope", "Level1Protocols", function ($scope, Level1Protocols) {
              $scope.protocolData = Level1Protocols;
              console.info("protocolData", $scope.protocolData); //This is executed before Level1Protocols return any data and hence undefined
           }]
      }
    })

Jsims · Accepted Answer · 2015-07-31 19:08:30Z

3

I believe your resolve has to return a promise. There is nothing to wait for if it isn't returning anything. I think something like the below code will work.

              Level1Protocols: ["Level1", "Protocol", "$q", function (Level1, Protocol, $q) {

              var defer = $q.defer();
              var protocolData = [],
                  protocol = new Protocol.Protocol(),
                  detailData = {};

                  Level1.loadProtocolData().success(function (response) {
                      for (var i = 0; i < response.length; i++) {
                          protocol.title = response[i].Title;
                          protocol.level = 1;
                          protocol.icon = Level1.getImageFromArray(response[i].Title);
                          protocolData.push(protocol);
                      }
                      console.log(protocolData);
                      defer.resolve(protocolData);
                  });

                  return defer.promise;
              })]

answered Jul 31, 2015 at 19:08

Jsims

585 bronze badges

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

1 Comment

rout0802 Over a year ago

I am running into another issue. All rows in protocolData array has only last item from the above for loop. Possible closure issue. any idea???

Collectives™ on Stack Overflow

Angular ui_router $stateProvider resolve doesn't return data to controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related