AngularUI Modal not rendering http fetched data

Question

I am trying to embed AngularUI modal to one of my web page.

This function fetches data using HTTP get request.

$scope.fetchTimings=function(){
$http({
    method: 'GET',
    url: 'get/xyz'
})
    .success(function(data) {
            return data;
    })
    .error(function(data, status) {
        return {};
    });

};

This is the variable that I am passing to modal:

$scope.newCategory={
  title:'xyz',
  openHours: $scope.fetchTimings()
}

Controller:

var modalInstance = $modal.open({
templateUrl: "addcategory.html",
controller: "addCategoryModalInstanceCtrl",
resolve: {
    newCategory: function() {
        return $scope.newCategory;
    }
}
});

Modal Instal Controller:

.controller('addCategoryModalInstanceCtrl', function($scope, $modalInstance, newCategory) {
    $scope.newCategory = newCategory;
    $scope.addedNewCategory = $scope.newCategory;
    $scope.ok = function() {
        $modalInstance.close($scope.addedNewCategory);
    };

    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };
})

View: In view, {{newCategory.title}} is being rendered, while {{newCategory.openHours}} shows empty objects.

I guess, this is related to some async delay. How can I fix this problem?

-Thanks

fetchTimings always returns nothing, i mean there is no return statement -) — Petr Averyanov
– Petr Averyanov, Commented Dec 10, 2014 at 18:55

iH8 · Accepted Answer · 2014-12-10 19:07:27Z

That's exactly what resolve is meant for, it wil keep your controller waiting untill everything in there is resolved:

Controller:

var modalInstance = $modal.open({
    templateUrl: "addcategory.html",
    controller: "addCategoryModalInstanceCtrl",
    resolve: {
        newCategory: function() {
            return $scope.newCategory;
        },
        timings: ['$http', function($http){
            return $http({
                method: 'GET',
                url: '/someUrl'
            });
        }]
    }
});

Modal instance controller:

.controller('addCategoryModalInstanceCtrl',
    function($scope, $modalInstance, newCategory, timings) {
        $scope.timings = timings;
        $scope.newCategory = newCategory;
        $scope.addedNewCategory = $scope.newCategory;
        $scope.ok = function() {
            $modalInstance.close($scope.addedNewCategory);
        };

        $scope.cancel = function() {
            $modalInstance.dismiss('cancel');
        };
    }
)

See the reference for ui-router resolve: https://github.com/angular-ui/ui-router/wiki#resolve

Collectives™ on Stack Overflow

AngularUI Modal not rendering http fetched data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related