Angularjs: Can I have my directive run after controller API callback

Question

first time asker. Apologies if my jargon isn't quite right I'm new to angularjs

I have a controller which gets a list of products with a HTTP call

contractManagementControllers.controller('PriceBandsCtrl', ['$scope', '$routeParams',     '$http', '$location',
    function ($scope, $routeParams, $http, $location)
    {
        $http.get('products').success(function (products)
        {
            $scope.productList = products
        })
    }

And a directive which I would like to have access to that product list.

contractManagementControllers.directive("priceBands",function($http)
{
    return {
        scope: true,
        restrict: 'AE',
        replace: 'true',
        templateUrl: 'Partials/PriceBand.html',
        link: function ($scope, ele, attrs, c)
        {
            // use $scope.productList
        }
});

My issue is with the order in which things happen. The controller function runs first, followed by the directive link function, followed by the callback which sets the product list. As such $scope.productList is undefined in the directive link function and gives an error

Is there a way to force the link function to wait until the callback has completed?

Ruben Nagoga · Accepted Answer · 2014-06-06 12:30:55Z

1

Set default value to productList in order not get error about undefined variable

contractManagementControllers.controller('PriceBandsCtrl', ['$scope', '$routeParams',     '$http', '$location',
    function ($scope, $routeParams, $http, $location)
    {
        $scope.productList = [];
        $http.get('products').success(function (products)
        {
            $scope.productList = products
        })
    }

and then watch for changes of the productList in directive:

contractManagementControllers.directive("priceBands",function($http)
{
    return {
        scope: true,
        restrict: 'AE',
        replace: 'true',
        templateUrl: 'Partials/PriceBand.html',
        link: function ($scope, ele, attrs, c)
        {
            $scope.watch('productList', function(newValue, oldValue) {
                //Perform here if you need
            });
        }
});

answered Jun 6, 2014 at 12:30

Ruben Nagoga

2,2182 gold badges20 silver badges32 bronze badges

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

1 Comment

user3714916 Over a year ago

That's great thanks, although turns out the watch needs a dollar sign $scope.$watch

chandu · Accepted Answer · 2014-06-06 12:19:10Z

0

no need of waiting for callback in angularjs. just put the $scope.productList=[]; in your controller as first line. it will not give undefined to directive.

In your directive link function just write the $watch function to watch changes in element.

answered Jun 6, 2014 at 12:19

chandu

2,2763 gold badges23 silver badges35 bronze badges

Collectives™ on Stack Overflow

Angularjs: Can I have my directive run after controller API callback

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related