How to show angular bootstrap popover on custom event? - angularjs

Question

I want to display bootstrap popover on custom event (after loading data from server). I don't understand why this code don't work. JSFiddle
And second question, how to trigger events if I set replace = true? Because of IE8 doesn't support custom tags and throws exception.
<div ng-app="tcApp">
<manual></manual>
</div>
var tcApp = angular.module('tcApp', [ 'ui.bootstrap' ]);
tcApp.config(function ($tooltipProvider) {
$tooltipProvider.setTriggers({
'openAfterLoad': 'closeOnClick'
});
});
tcApp.directive('manual', [ '$timeout', '$interval', function($timeout, $interval) {
return {
restrict: 'E',
scope: {},
template:
'<a ' +
' href="#" ' +
' ng-if="isManualVisible" ' +
' popover-append-to-body="true" ' +
' popover-placement="bottom" ' +
' popover-trigger="openAfterLoad" ' +
' popover-title="{{title}}" ' +
' popover="{{content}}" ' +
' tooltip="{{title}}" ' +
' >' +
' <span class="{{textClass}}">' +
' <span ng-show="!loading" class="glyphicon glyphicon-question-sign"></span>' +
' <span ng-show="loading" class="glyphicon glyphicon-refresh"></span>' +
' </span>' +
'</a>',
replace: false, // true for IE8 only
link: function (scope, element, attr) {
scope.isManualVisible = true;
scope.title = 'First title value';
scope.content = 'First content value';
scope.textClass = 'text-info';
scope.opened = false;
scope.loading = false;
scope.loaded = false;
scope.loadedTitle = false;
scope.loadedContent = false;
scope.checkLoadState = function () {
if (scope.loadedTitle && scope.loadedContent) {
scope.loaded = true;
if (scope.loading)
scope.loading = false;
element.triggerHandler('openAfterLoad');
}
};
scope.$watch('loadedTitle', scope.checkLoadState);
scope.$watch('loadedContent', scope.checkLoadState);
element.on('openAfterLoad', function(event) {
console.log('openAfterLoad');
scope.opened = true;
});
element.on('closeOnClick', function(event) {
console.log('closeOnClick');
scope.opened = false;
});
element.on('click', function(event) {
console.log('click');
if (scope.loaded) {
if (scope.opened)
element.triggerHandler('closeOnClick');
else
element.triggerHandler('openAfterLoad');
} else {
scope.loadData();
}
});
scope.loadData = function() {
if (!scope.loaded && !scope.loading) {
scope.loading = true;
$interval(function() {
scope.title = 'New title value';
scope.loadedTitle = true;
}, 5000, 1);
$interval(function() {
scope.content = 'New content value';
scope.loadedContent = true;
}, 5000, 1);
}
};
}
};
}]);

Answer 1

Ok, I'm found solution.
First of all, mixing of replace=true and ng-if on root template element is a bad idea. Next, I separated angular on/broadcast events and native js events. Native events still required for popover.
JSFiddle
<div ng-app="tcApp">
<manual></manual>
</div>
var tcApp = angular.module('tcApp', [ 'ui.bootstrap' ]);
tcApp.config(function ($tooltipProvider) {
$tooltipProvider.setTriggers({
'openAfterLoad': 'closeOnClick'
});
});
tcApp.directive('manual', [ '$timeout', '$interval', function($timeout, $interval) {
return {
restrict: 'E',
scope: {},
template:
'<a ' +
' href="#" ' +
' ng-show="isManualVisible" ' +
' ng-click="clickHandler()" ' +
' popover-append-to-body="true" ' +
' popover-placement="bottom" ' +
' popover-trigger="openAfterLoad" ' +
' popover-title="{{title}}" ' +
' popover="{{content}}" ' +
' tooltip="{{title}}" ' +
' >' +
' <span class="{{textClass}}">' +
' <span ng-show="!loading" class="glyphicon glyphicon-question-sign"></span>' +
' <span ng-show="loading" class="glyphicon glyphicon-refresh"></span>' +
' </span>' +
'</a>',
replace: true, // true for IE8 only
link: function (scope, element, attr) {
scope.isManualVisible = true;
scope.title = 'First title value';
scope.content = 'First content value';
scope.textClass = 'text-info';
scope.opened = false;
scope.loading = false;
scope.loaded = false;
scope.loadedTitle = false;
scope.loadedContent = false;
scope.checkLoadState = function () {
if (scope.loadedTitle && scope.loadedContent) {
scope.loaded = true;
if (scope.loading)
scope.loading = false;
scope.$broadcast('openAfterLoad');
}
};
scope.$watch('loadedTitle', scope.checkLoadState);
scope.$watch('loadedContent', scope.checkLoadState);
scope.$on('openAfterLoad', function(event) {
console.log('openAfterLoad');
scope.opened = true;
$timeout(function() {
// trigger popover
element.triggerHandler('openAfterLoad');
});
});
scope.$on('closeOnClick', function(event) {
console.log('closeOnClick');
scope.opened = false;
$timeout(function() {
// trigger popover
element.triggerHandler('closeOnClick');
});
});
scope.clickHandler = function(event) {
console.log('click');
if (scope.loaded) {
if (scope.opened)
scope.$broadcast('closeOnClick');
else
scope.$broadcast('openAfterLoad');
} else {
scope.loadData();
}
};
scope.loadData = function() {
if (!scope.loaded && !scope.loading) {
scope.loading = true;
$interval(function() {
scope.title = 'New title value';
scope.loadedTitle = true;
}, 2000, 1);
$interval(function() {
scope.content = 'New content value';
scope.loadedContent = true;
}, 3000, 1);
}
};
}
};
}]);