来自 API 的工具提示数据未初始化

tooltip data coming from api not initialized

本文关键字:初始化 数据 工具提示 API 来自      更新时间:2023-09-26

我是创建的工具提示指令。 但是数据来自 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);
});