How to wait till the end of $compile in angularJS

angularjs directive compile
compile and link in angularjs
compile scope
compile is not defined
how to compile angularjs project
angularjs bindtocontroller
angularjs directive priority
angularjs-directive replace

I'm loading a template and then compiling it against my scope using $compile service.

var template = "<div> .. {{someCompilingStuff}} ..</div>";
var compiled = $compile(template)(cellScope);

and then using it in a popover

cellElement.popover({
    html: true,
    placement: "bottom",
    trigger: "manual",
    content: compiled
});

My template is quite complex and may take some time to compile.

How can I make sure that angular has finished compiling the template before using it in the popover ?

Edit: I tried to force angular to $apply() before creating the popover, it does work but generate javascript errors which is not acceptable for me.

$compile allows you to use what is called a clone attach function which allows you to attach your elements to the document. Here is an example you may be able to use:

var template = "<div> .. {{someCompilingStuff}} ..</div>";
var compiled = $compile(template)(cellScope, function (clonedElement) {
  cellElement.popover({
    html: true,
    placement: "bottom",
    trigger: "manual",
    content: clonedElement
  });
});

Reference to Angular documentation about $compile usage

javascript - How to wait till the end of $compile in angularJS, $compile allows you to use what is called a clone attach function which allows you to attach your elements to the document. Here is an example you may be  Wait till response comes from $http request in AngularJS In this article, we are going to learn how to wait till the $http response comes from server using AngularJS

In these cases you probably would like to use $timeout to fix the issue.

Something like this:

var template = "<div> .. {{someCompilingStuff}} ..</div>";
var compiled = $compile(template)(cellScope);
cellElement.popover({
   html: true,
   placement: "bottom",
   trigger: "manual",
   content: compiled
 });

$timeout(function(){
    cellElement.popover("show");
}, 0);

Here's an example JSFIDDLE I've created for you. Look how I show & hide the popover using $timeout.

How to wait till the end of $compile in angularJS, I'm loading a template and then compiling it against my scope using $compile service. var template = "<div> .. {{someCompilingStuff}} ..</div>"  AngularJS Directives - Compile and Link in depth - Part 1 - Duration: 41:43. Tech CBT 68,671 views. 41:43. World's Most Famous Hacker Kevin Mitnick & KnowBe4's Stu Sjouwerman Opening Keynote -

Even if it would be possible to get a notification when the compile/link function has completely rendered the template you still would not be certain if the browser did finish making changes to the page layout in response. You might be able to fix your problem by introducing a small delay using $timeout (setTimeout) before you trigger the popup. From reading the answers on is there a post render callback for Angular JS directive? I'd think that could fix your issue.

AngularJS: API: $compile, The compilation is a process of walking the DOM tree and matching DOM will not have been compiled and linked since they are waiting for their template to load and directive-name-end , and group them together as the directive elements. View compilation in Angular basically traverses the entire DOM tree of whatever node you give it, creating a single function, that when called will execute every linking function from every directive it finds in that DOM tree, with the appropriate scope, element, attributes and (optionally) controllers.

I'm going to supply a non-code answer (so you can dig a bit more and learn why -- plus I'm feeling lazy at this hour):

I'd recommend using event delegation with another parent HTML element as the delegate upon which you can invoke the popover method. Just include a class="popover" on any [parent] elements and compile a template within it. You may be able to execute / invoke the popover method on that parent element. However, I'm not entirely sure you don't need the child elements (from the template) since I don't know that plug-in. I would try anything other than a timeout, however.

My hope is that this answer (while possibly incorrect) precipitates a creative solution (resulting in clean, reliable code) from the author.

How to wait till the end of $compile in angularJS, I'm loading a template and then compiling it against my scope using $compile service. var template = "<div> .. {{someCompilingStuff}} ..</div>"; var compiled  Your code is nice and works fine, but it doesn't involve AngularJS (except for controller), so it doesn't know about a thing about AngularJS DOM rebuilding and scopes life-cycle. It works by detecting side-effect event of AngularJS DOM rendering (you detect resize event of ul container) instead of direct information from AngularJS.

As a suggestion you can create a compiler service in which inject $compile and create a method with parameter accepting html and scope.

in that method use $deferred and call that method from your controller and resolve will give you a call back which is a promise that compilation is done.

let me know if it dosn't works for you i will provide you code samples.

javascript - How to wait till the end of $compile in angularJS -, How to wait till the end of $compile in angularJS. Question. I'm loading a template and then compiling it against my scope using $compile service. var template  Angular directives - when and how to use compile, controller, pre-link and post-link [closed] What is the difference between compile and link function in angularjs.

Wait for content to be updated and rendered in AngularJS 1.x , edit: tried force angular $apply() before creating popover, work generate javascript errors not acceptable me. $compile allows use called clone attach function  Directive Definition Object. The directive definition object provides instructions to the compiler.The attributes are: multiElement. When this property is set to true (default is false), the HTML compiler will collect DOM nodes between nodes with the attributes directive-name-start and directive-name-end, and group them together as the directive elements.

javascript, I've run into this problem before on another project, and the other day I JavaScript in an AngularJS directive after the DOM was loaded and Step 1 - Add our process to the end of the message queue. Sep 23 2017 · Creating a maintainable gulpfile.js Sep 10 2017 · JavaScript is a compiled language? AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript!

An AngularJS Directive Tutorial with Example Code, edit: tried force angular $apply() before creating popover, work generate javascript errors not acceptable me. $compile allows use called clone attach function  Wait for data in controller before link function is run in AngularJS directive but would like to know if there is a way to "wait" for the service call before

Comments
  • but $compile service return link function, how you want you is as html?
  • one way is to use $applyAsync or $evalAsync or $$postDigest
  • what is this .popover? Is this a bootstrap component? And if so, doesn't it expect either a string or a function, whereas you are passing an element (compiled)
  • it's bootstrap popover's yes. And the compile function seems to return a DOM object witch is accepted by popover.content. My code is working but the popover is created with the uncompiled content, then the content compile and the text inside the popover is replaced as expected but because the lenght of the popover content changed I have visual bugs. That's why i would like to create the popover with the compiled content and not the template
  • @kyori, can you provide sample plunker with your code?
  • It allows you to attach a cloned node prior to its linking - exactly how does that address the OP's issue or answer the OP's question?
  • I think it's important to note (considering the syntax), that $compile(arg) returns a function. This is why you can rely on this type of execution over a timeout... the callback is only executed after the $compile function completes. However, there is no promise (no pun intended) that the DOM has finished painting the template.
  • While this answer the question straight forward in this case it's not going to work (Read Simon Groenewolt's answer). Here is your example: jsfiddle.net/q47jbnq4
  • @JoeJohnson, unclear what you are saying. The cloneAttach (callback function, as you called it) executes prior to the link function returning the linked DOM element. The $compile function returns a function, right - the above-mentioned link function. Regardless, I can't see how this answer actually answer the question, so I'm puzzled by the upvotes
  • I had a similar issue to the OP's issue. In my case, I was appending a compiled directive to a hidden div #modal before opening it, but sometimes the #modal would open be empty because the directive hadn't finished compiling. Using this method solves the problem by ensuring that the element is actually ready before opening the modal.
  • Always avoid any timeout functionality unless you're delaying some type of animation. $timeout (like window.setTimeout) relies on a system's clock "speed" (processor). 500 milliseconds (milliseconds is the unit of measure for timeouts in JS / most code). In short, depending on how many applications are currently loaded into memory and running (including tabs in a browser, especially) on a user's computer, the variance of 500 milliseconds in a timeout is generally unpredictable. Hence, callbacks and promises.
  • @JoeJohnson -Using timeout is fine. There are places(like here) where $timeout(fn,0) is a good solution. Read this: stackoverflow.com/questions/779379/…
  • That is a very, very old post. I disagree, regardless. Timeouts are unpredictable.