Let me explain in more detail. I am utilizing the tooltip directive from the UI Bootstrap suite, which allows me to attach a tooltip to an input element like this:
<input
type="text"
ng-model="inputModel" class="form-control"
placeholder="tooltip without directive"
tooltip="blabla"
tooltip-placement="top"
tooltip-trigger="mouseenter"
tooltip-enable="!inputModel" />
Due to certain reasons, I need to dynamically add the tooltip="blabla" property to the DOM element. To achieve this, I have created a custom directive as follows:
(function(){
'use strict';
angular
.module('ui.bootstrap.demo', ['ui.bootstrap'])
.directive('errorHandler', Directive)
function Directive(){
return {
restrict: 'A',
replace: true,
link : function(s,e,a) {
e.attr('tooltip', 'blabla');
}
};
}
})();
So when I use the directive like this:
<input
type="text"
error-handler
ng-model="inputModel" class="form-control"
placeholder="tooltip with directive"
tooltip-invalid-required="obbligatorio"
tooltip-placement="top"
tooltip-trigger="mouseenter"
tooltip-enable="!inputModel" />
The resulting code is similar to the first snippet, but unfortunately, the tooltip does not display. I have attempted to use compile but it seems that I have overlooked something. You can find a working example on this plunk.