你可以重新发起一个ui-popover吗?

时间:2017-01-01 16:49:41

标签: angular-ui-bootstrap rangy

由于我在构建DOM之后注入<span ui-popover></span>,因此我需要重新启动弹出窗口,否则它将无法显示。

有没有那样做?

HTML

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

我正在使用外部rangy库,它会在突出显示的文本周围注入。您还可以注入elementAttirbutes以适应这些范围,这在代码的这一部分中显示:

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);
}

我要求突出部分文本,只有在我从服务器上传之后(highlighter1调用上面写的init高亮显示)

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);

所以最后我的DOM在我启动所有内容后被更改,然后与span相关联的属性不会执行任何操作。

1 个答案:

答案 0 :(得分:0)

你的标记应该是(注意前缀)

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

或者如果您想要动态内容

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

如果您想要重新初始化工具提示,您可以触发$destroy事件并重建,如果使用ng-if并在需要时将其设置为true,则可以重建一次。

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