我是创建的工具提示指令。 但是数据来自 API,所以在页面加载指令初始化,然后通过 api 加载数据,数据稍后出现,因此指令没有正确初始化。
我该如何处理?
.HTML::
<strong href="#" pop-over items="result" title="detailes" display-length="5">{[{ result.name}]}
Javascript :
listingApp.directive('popOver', function ($compile) {
var itemsTemplate = "<ul class='unstyled'><li>{{items}}</li></ul>";
var getTemplate = function (contentType) {
var template = '';
switch (contentType) {
case 'items':
template = itemsTemplate;
break;
}
return template;
}
return {
restrict: "A",
transclude: true,
scope: {
items: '=',
title: '@',
//popContent: '=',
displayLength:'@'
},
transclude: true,
template: "<span ng-transclude></span>",
link: function (scope, element, attrs) {
debugger;
// console.log('^^^^^^^^^^^^^^^'+attrs.popContent);
var popOverContent;
if (scope.items) {
var html = getTemplate("items");
popOverContent = $compile(html)(scope);
}
var options = {
content: popOverContent,
placement: "bottom",
html: true,
title: scope.title,
trigger: "hover"
};
if ((scope.items || '').length > attrs.displayLength) {
$(element).find('.display_data').text(scope.items.substring(0, attrs.displayLength));
element.attr('title', scope.items);
$(element).find('.view_more').popover(options);
} else {
$(element).find('.display_data').text(scope.items);
}
}
};
});
尝试用$timeout包装您的 .popover 插件:
$timeout(function() {
$(element).find('.view_more').popover(options);
});