Howto render jquery lib (particulary coconut countdown timer) for every
ng-repeat item? I wrap jquery lib to this directive:
.directive('countDownTimer',['$http', function($http) {
return {
restrict: 'AEC',
templateUrl: 'partials/count-down-timer.html',
scope: { item_id: '=', start_date: '=', now_date: '=', end_date: '=' },
link: function(scope, element, attrs) {
var slctor = "#countdown"+scope.item_id;
$(slctor).coconut({
startDate: scope.start_date",
nowDate: scope.now_date,
endDate: scope.end_date,
});
}
};}]);
<count-down-timer item_id="model.itemID" start_date="model.startDate"
now_date="model.nowDate" end_date="model.endDate"></count-down-timer>
partials/count-down-timer.html :<div id={{'countdown'+item_id}}
class="float-left googlefont font-32"></div>
//This doesn't work, but if I change angular expression statically into string
eg.<div id="countdown1" class="float-left googlefont font-32"></div> it works.
*Do you know why static way work and dynamic with{{}} don't work ? Maybe
use $compile or ?*
solution2: I also try solution which directly bind coconut function on
element and avoid referencing thorough DOM itemID so I tried:
.. link: function(scope, element, attrs) {
angular.element(
element.coconut({ startDate: scope.start_date, nowDate: scope.now_date,
endDate: scope.end_date,
})); ..
but In this solution works timer for elements but it looks that timers
share one together space and badly render time. *Do you know why that way
without ID referencing where I bind directly on element doesn't work
correctly?*
here is my post on SO:
http://stackoverflow.com/questions/15881453/angularjs-accessing-dom-elements-inside-directive-template
btw here is countdown plugin which I use:
http://codecanyon.net/item/coconut-jquery-countdown-plugin/full_screen_preview/2919162
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
