StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POadd bootstrap.ui tooltip dynamically in my custom directive
text
Body
copied!<p>I can add tooltip to my html elements using the bootstrap.ui directive tooltip e.g content works.</p> <p>I am however creating my own attribute directive for inline editing. the directive looks something like this in use:</p> <pre><code><h4 ng-bind="model.fieldName" type="text" style="display: inline" edit-on-click="model.fieldName" save="saveFieldName"></h4> </code></pre> <p>My directive edit-on-click simply adds an onclick function that places an input box and sets the ng-model to the same name as in edit-on-click. When the user presses enter or blurs the field the save method is called. This works perfectly and there is a lot of other directives doing the same thing. </p> <p>I do however want to also add a tooltip to the existing tag on mouseenter to make it visible that this field is editable.</p> <p>I've tried several things, like adding the tooltip attribute in the link function and also tried adding it in the compile function, but angular does not process the attribute as a directive. How can I make angular see that there is a new directive on the existing tag?</p> <p>I do not want to add a tooltip to the original html tag, as this should be a part of the directive.</p> <p>My directive looks something like this</p> <pre><code>directive("editOnClick", function ($compile) { return { restrict: 'A', link: function (scope, iElement, iAttrs, controller) { var inputC = $compile("<input type='" + iAttrs.type + "' ng-model='" + iAttrs.editOnClick + "'>")(scope); var input = inputC.eq(0); var oldDisplay, saveFunc = iAttrs.save; input.blur(function (evt) { if (saveFunc && scope[saveFunc]) { scope[saveFunc](function () { input.css("display", "none"); iElement.css("display", oldDisplay); }); } }); iElement.after(input); iElement.click(function () { oldDisplay = iElement.css("display"); iElement.css("display", "none"); input.css("display", "block") input.click(); input.keyup(function (evt) { if (evt.keyCode === 13) { input.blur(); } }); }); } } }) </code></pre> <p>So I can easily add an attribute to the iElement, but I need to tell angular to parse it as a directive in order to get the tooltip.</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