由于我在构建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相关联的属性不会执行任何操作。
答案 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>