CODEWITHSUNDEEP
angularjsangularjs-directive
FutuToad
FutuToad

Reputation: 2850

How can I call link directive function after controller code has been run

I'm trying to render code in the link function after the controller resolves the http call but the link function is called before that. How can I call link after $scope.menuHtml has been set?

HTML:

  <div id="testD" nav-menu-output="parseMenuJsonAndOutPutMenu()"></div>

DIRECTIVE:

return {
    restrict: 'A',
    controller: ['$scope', '$q','$http', function ($scope, $q,$http) {
        $http.get('ajax/menu' ).then(function (data) {
            $scope.menuHtml = generateHtmlMenu(data);
        });
    }],
    link: function(scope, element, attr) {
        var templateString = scope.menuHtml;
        var compiledTemplate = $compile(templateString)(scope);
        compiledTemplate.appendTo("#testD");
    }

}

Upvotes: 5

Views: 14060

Answers (2)

bjtitus
bjtitus

Reputation: 4270

I would suggest using scope.$watch() and rerunning your compiled template code on that. This way you can make as many requests to the menu endpoint as you want and your template will be recompiled.

Here's more information about watch: http://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch

Here's an updated version which should work properly:

return {
    restrict: 'A',
    controller: ['$scope', '$q','$http', function ($scope, $q,$http) {
        $http.get('ajax/menu' ).then(function (data) {
            $scope.menuHtml = generateHtmlMenu(data);
        });
    }],
    link: function(scope, element, attr) {
        scope.$watch('menuHtml', function() {
            var templateString = scope.menuHtml;
            var compiledTemplate = $compile(templateString)(scope);
            compiledTemplate.appendTo("#testD");
        });
    }

}

Upvotes: 7

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38663

You can do it by using async: false

Please Try this code instead of your code, 

return {
    restrict: 'A',
    controller: ['$scope', '$q','$http', function ($scope, $q,$http) {    
     $http({
        method: 'GET',
        url: 'ajax/menu',
        async: false
    }).success(function (data) {
         $scope.menuHtml = generateHtmlMenu(data);
    })}],
    link: function(scope, element, attr) {
        var templateString = scope.menuHtml;
        var compiledTemplate = $compile(templateString)(scope);
        compiledTemplate.appendTo("#testD");
    }    
}

Upvotes: 0

Related Questions