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

Question

我创建了tooltip指令。但是数据来自api，所以页面加载指令初始化然后通过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);
                    }
                }

            };
        });

Answer 1

尝试使用$ timeout包装.popover插件：

$timeout(function() {
    $(element).find('.view_more').popover(options);

});