One of my directives is set up like this:
angular.module('somemodule').directive('tooltipText', function ($timeout, $compile, $document, config, $filter) {
return {
restrict: 'A',
scope:{
tooltip: '='
},
link: function (scope, element, attrs) {
let tipHtml = `<div ng-class="tipClass">
<div class="header">
<span>{{ title }}</span>
</div>
<div class="body">
<br ng-show="showDescription && description"/>
<span ng-show="showDescription">{{description}}</span>
</div>
<div class="tooltip-arrow"></div>
</div>`;
scope.$watch('tooltip',(changedAttr) => {
if (element) {
let elm = angular.element(element)[0];
if (elm.getAttribute('tooltip-show')) {
if (changedAttr && elm.offsetParent != null) {
showtooltip(element);
elm.scrollIntoView();
}
} else {
element.bind('mouseover', showtooltip);
}
}
});
showtooltip = (elem)=>{
//do some tooltip logic and then after a timeout of say, 5secs, I do
scope$.tooltip = false;
//i.e i remove the tooltip and set the attribute
// value back so that next time change can be
// watched by this directive. Basically it's a tooltip
//that should last for around 5 seconds and when
//setting the attribute on element again to true,
// it should reappear.
}
});
However, there seems to be a conflict with other directives due to this isolated scope. How should I best address this issue?