Tuesday 8 January 2019

javascript - AngularJS: How to run additional code after AngularJS has rendered a template?



I have an Angular template in the DOM. When my controller gets new data from a service, it updates the model in the $scope, and re-renders the template. All good so far.




The issue is that I need to also do some extra work after the template has been re-rendered and is in the DOM (in this case a jQuery plugin).



It seems like there should be an event to listen to, such as AfterRender, but I can't find any such thing. Maybe a directive would be a way to go, but it seemed to fire too early as well.



Here is a jsFiddle outlining my problem: Fiddle-AngularIssue



== UPDATE ==



Based on helpful comments, I've accordingly switched to a directive to handle DOM manipulation, and implemented a model $watch inside the directive. However, I still am having the same base issue; the code inside of the $watch event fires before the template has been compiled and inserted into the DOM, therefore, the jquery plugin is always evaluating an empty table.




Interestingly, if I remove the async call the whole thing works fine, so that's a step in the right direction.



Here is my updated Fiddle to reflect these changes: http://jsfiddle.net/uNREn/12/


Answer



This post is old, but I change your code to:



scope.$watch("assignments", function (value) {//I change here
var val = value || null;
if (val)
element.dataTable({"bDestroy": true});

});
}


see jsfiddle.



I hope it helps you


No comments:

Post a Comment

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print &q...