StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>In your link function, you are compiling and linking the <code>img</code> where the popover directive is used.</p> <pre><code>var milesHtml = '<img popover="End-to-end support" width="20" height="20" src="./img/info.png"/>'; var compiledMilesHtml = $compile(milesHtml)(scope); </code></pre> <p>This hooks up DOM with events and scope and gives you a final node: <code>compiledMilesHtml</code>. You are then abandoning all of this and binding just the HTML into your displayed DOM</p> <pre><code>template: '<span class="test" ng-bind-html="milestonesHTML"></span>', scope.milestonesHTML = compiledMilesHtml[0].outerHTML; </code></pre> <p>This is just text, and has no knowledge about how events are hooked up or what watchers on the scope or other workings should be doing to your element. All that remains is the original DOM transformations.</p> <p>If you do need to compile the node manually, you can do so and insert the actual element, <code>compiledMilesHtml</code>, into the DOM with jQuery or jQLite. However, your template is already being compiled, linked and inserted into the DOM. Without any other special requirements, your <code>img</code> should just be placed in your template, where it will work fine.</p> <pre><code>template: '<span class="test"><img popover="End-to-end support" width="20" height="20" src="./img/info.png"/></span>' </code></pre> <p>Demo <a href="http://plnkr.co/edit/9Vws8JJXM9tBj5rJNaUg?p=preview" rel="nofollow">here</a>. I have changed the attributes passed to the popover to match in the custom directive and HTML versions.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload