CODEWITHSUNDEEP
javascriptangularjs
mikeb
mikeb

Reputation: 11267

Angular Directive not interpolating variables properly

Here is a fiddle describing this issue, the second node should have 4 values but only displays 1:

https://jsfiddle.net/mbaranski/akcz3569/

I have an angular directive:

var OrgChartDirective = function() {
    return {
        restrict: 'AE',
        scope: {
            source     : '=',
        },
        link: function(scope, element, attrs) {
            var target = $(element);
            var source = $('#' + scope.source);
            var options = {
                container  : target,
            };
            console.log("Drawing org chart at :");
            console.log(element);
            console.log("Source is " + scope.source);
            source.orgChart(options);
        }
    }
};

This draws an org chart based on a nested UL that I have on the page. Works great for a static list, but if I draw the list with an angular ng-repeat, it does not show the list, it only shows the {{whatever}} text. How do I make the directive use the rendered data instead of the raw template data?

Upvotes: 0

Views: 118

Answers (1)

Cameron
Cameron

Reputation: 434

Use a $timeout to let the ng-repeat render. See here: https://jsfiddle.net/akcz3569/7/

$timeout(function() {
  source.orgChart(options);
});

Upvotes: 1

Related Questions