search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Handling dynamic HTML when using AngularJS

Asked by B.
5 years ago.

I'm trying to add a button to the corner of the calendar using dp.cornerHtml:

cornerHtml: '<a ng-click="test()">test</a>'

But when I click on it, the test function won't fire. Does DayPilot offer a way to compile the HTML after it's added to the view? I can't find anything in the docs about this.

Thanks!

Answer posted by Bert
5 years ago.

Figured it out, hopefully will help somebody in the future.

So you set a directive inside your custom daypilot-scheduler tag. Let's name it "dynamic-content".

<daypilot

  • scheduler id="dp" daypilot-config="config" daypilot-events="events" dynamic-content></daypilot-scheduler>

Then you declare it.

app.directive('dynamicContent', ['$compile', '$timeout', function ($compile, $timeout) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$timeout(function () {
$compile(element.contents())(scope);
});
},
}
}]);

Dynamically added HTML needs to be compiled by Angular before the "ng-click" can fire. Also, the $compile function needs to run after the DOM has rendered, that's why we use the $timeout function without providing the "delay" parameter.

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.