5

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");
    }

}
1
  • +1 for i got this problem on my fresher time using angularjs. But i got the answer Feb 24, 2014 at 16:41

2 Answers 2

7

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");
        });
    }

}
2
  • hmm. possibly more useful than the other answer
    – FutuToad
    Feb 24, 2014 at 16:48
  • @FutuToad Just updated with a code snippet. Give that a try (didn't actually run it so there could be minor issues) and see if that works for you. Also, you will need to change the appendTo to something else to prevent duplicates. Maybe use a container div and use .html().
    – bjtitus
    Feb 24, 2014 at 16:56
0

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");
    }    
}
4
  • This will, of course, potentially block other rendering. You should stay away from doing these request synchronously, especially in small components which may block others from loading in.
    – bjtitus
    Feb 24, 2014 at 16:50
  • @bjtitus hmm, even with this way the link still runs first
    – FutuToad
    Feb 24, 2014 at 16:50
  • did you check it using debugger? Feb 24, 2014 at 16:53
  • @RameshRajendran yep I did.
    – FutuToad
    Feb 25, 2014 at 9:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.