CODEWITHSUNDEEP
angularjsangularjs-directivejquery-ui-progressbar
thewatcheruatu
thewatcheruatu

Reputation: 342

AngularJS directive, manipulating the template with JavaScript

I'm trying to implement JQueryUI progressbars through an AngularJS directive, but I'm encountering a slight annoyance, and I feel as though I'm probably just failing in my understanding of the plethora of configuration options available with directives. Basically, I want to be able to do something like this:

<div ng-repeat="te in timedEvents">
    <progressbar identifier="{{te.identifier}}" begins="{{te.beginTimestamp}}" ends="te.endTimestamp" now="td.nowTimestamp"></progressbar>
</div>

The events are coming from the server asynchronously (not sure if that's important to mention). And then have a directive that looks kind of like this:

myApp.directive('progressbar', function($compile) {
    return {
        restrict: 'E',
        scope: {
            identifier: '@identifier'
        },
        template: "<div id='{{identifier}}'></div>",
        link: function (scope, element, attrs) {
            var percentComplete = --whatever--; //calculate this, obviously
            $("#" + attrs.identifier).progressbar({
                value: percentComplete;
            });
            //do other stuff to set a proper interval for keeping this updated
        }
    }
})

The problem being that the code in the link function executes before the DOM element created by the template is ready, so if you try to access said DIV through JQuery or otherwise, you just get back undefined. The hacky way to get around this would be to simply set a timeout to keep trying until the element can be found (it takes some amount of time under a second, usually). I'm just wondering, though, if there's a way to do this through the directive, itself, so that it only attempts to execute that JavaScript code once the template stuff has been laid into the page properly.

Can anybody answer this question?

Upvotes: 1

Views: 648

Answers (0)

Related Questions