1

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?

thewatcheruatu
  • 242
  • 2
  • 9
  • 2
    Have you looked into the angular-ui directive for progressbars? Might make more sense. http://angular-ui.github.io/bootstrap/ – Sharondio Aug 14 '13 at 19:09
  • Couldn't you use $watch on the progress bar, and then only when its not null you will activate the progressbar function? – TidharPeer Aug 14 '13 at 19:14
  • have you tried inject `$document` and doing a `$document.ready(..)` similar to jQuery or if you use the `ng-view` you can use `scope.$on($viewContentLoaded)` function but it seems and correct me if im wrong you probably should compile function in your situation instead of link because you are transforming the DOM in your template? – David Chase Aug 14 '13 at 19:37
  • @Sharondio - Wow! No, I hadn't looked at the UI Bootstrap project. That would make my life a lot easier. Thank you! I'll probably use that. TidharPeer - Perhaps. I might play around with that. David Chase - I was confused about the difference between compile and link. I think the documentation mentions that you can manipulate the DOM in either, so I didn't understand why you'd prefer one over the other. – thewatcheruatu Aug 14 '13 at 19:43

0 Answers0