can you re-initiate a ui-popover?

Question

Since I'm injecting a <span ui-popover></span> after the DOM is constructed I need to reinitiate the popovers otherwise it won't show.

Is there away to do that?

HTML

<div ng-repeat="i in comments">
<div id={{i._id}} class="task" commentId={{i._id}}> {{i.text}} </div>
</div>

I'm using the external rangy library that injects 's around highlighted texts. You can also inject elementAttirbutes to accommodate these span, This is shown in this part of the code:

JS

function initHighLighter() {
    var cssApplier = null;
    highlighter = rangy.createHighlighter(document);
    cssApplier = rangy.createClassApplier('highlight-a',{elementAttributes: {'uib-popover':"test"}}/*, {elementAttributes: {'data-toggle':"popover", 'data-placement':"bottom", 'title':"A for Awesome", 'data-selector':"true", 'data-content':"And here's some amazing content. It's very engaging. Right?"}}*/);
highlighter.addClassApplier(cssApplier);
cssApplier = rangy.createClassApplier('highlight-b', {elementAttributes: {'uib-popover':"test"}}/*, {elementAttributes: {'data-toggle':"popover", 'data-placement':"bottom", 'title':"B for Best",  'data-selector':"true", 'data-content':"And here's some amazing content. It's very engaging. Right?"}}*/);
highlighter.addClassApplier(cssApplier);
}

I'm calling on to highlight parts of the texts, only after I upload them from the server (highlighter1 calls on init highlight written above)

JS

(function(angular) {
  'use strict';
angular.module('myApp', ['ui.bootstrap'])
 .controller('Controller', function($scope, $http, $timeout) {
    $http.get('/comments')
    .success(function(response) {
        $scope.comments = response;
        var allEl=[];
        var i;
        for (i=0; i<response.length; i++) {
            allEl.push(response[i]._id);
        }
        $http.post('/ranges', {"commentIds":allEl})
        .success(function(result){
            result.forEach(function(item){
                highlighter1(item.dataAction, item.rangyObject, true); 
          })
        })
    });
})
})(window.angular);

So in the end my DOM is being changed AFTER I initiated everything and then the attributes associated with the span don't do anything.

Answer 1

your markup should be (notice the prefix)

<span uib-tooltip="hello world"></span>

or if you want dynamic content

$scope.welcomeMessage = "hello world"; // inside controller
..
<span uib-tooltip="{{welcomeMessage}}"></span>

if you want to reinitialize the tooltip, you can trigger a $destroy event and have it rebuilt, one way if by using ng-if and setting it to true when you need it.

<span ng-if="doneUpdating" uib-tooltip="hello world"></span>