uib-tooltip作为Controller中的文本

Question

I have some problems with appending uib-tooltip to the view.

Controller: ('v' is an array)

$scope.video_link = function (v) {
    var del = "";
    if(v.deleted == 1) {
        del = '<i class="fa fa-times" uib-tooltip="Video deleted"></i>';
    }
    var link = del+'<a href="'+v.video_id+'">' + v.video_name + '</a>';
    return $sce.trustAsHtml(link);
}

View:

<span ng-bind-html="video_link(v)"></span>

Everything works well but tooltip itself don't show up.

I know I can move "uib-tooltip" to the view (and it works fine) but I need to build the whole link in Controller. Is it possible to made it work properly?

Answer 1

To make dynamically created by code md-elements to work you need to call

componentHandler.upgradeAllRegistered();
which initializes all new bootstrap components added to the view ie those are added programatically

componentHandler.upgradeElement(elem)
if you want to initilize only 1 element

make sure you call one of these functions after the element is added to the view and not before.

componentHandler global object is created when you import uibootstrap library to your project.

componentHandler reference