Question

我有一个简单的angularjs指令，用于显示工具提示。

<div tooltip-template="<div><h1>Yeah</h1><span>Awesome</span></div>">Click to show</div>

它工作正常，但现在我试图在时间轴javascript组件（visjs.org）中使用它

我可以像这样添加带有html的项目到这个时间轴

 item...
 item.content = "<div tooltip-template='<div><h1>Yeah</h1><span>Awesome</span></div>'>Click to show</div>";
 $scope.timelineData.items.add(item);

该项目在页面上显示良好但是从未到达tooltip-template指令的代码。

我怀疑因为第三方组件正在渲染项目，所以dom元素不会被角度读取。

我尝试过$ scope。$ apply（），$ rootScope。$ apply但结果是一样的。永远不会达到该指令。

如何告诉angular读取我的dom来解析这些指令？

这是指令代码：

.directive("tooltipTemplate", function ($compile) {
    var contentContainer;
    return {
        restrict: "A",
        link: function (scope, element, attrs) {
            var template = attrs.tooltipTemplate;

            scope.hidden = true;

            var tooltipElement = angular.element("<div ng-hide='hidden'>");
            tooltipElement.append(template);

            element.parent().append(tooltipElement);
            element
              .on('click', function () { scope.hidden = !scope.hidden; scope.$digest(); })


            $compile(tooltipElement)(scope);
        }
    };

});

修改

添加了plunker：http://plnkr.co/edit/lNPday452GiZJBhMH4Kl?p=preview

Answer 1

我尝试做同样的事情并通过手动创建范围并使用recv方法使用范围编译指令的html来提供解决方案。在片段下方

我在创建时间轴的指令中执行了以下部分。使用该指令的范围，

$compile

我通过shiftTemplate作为内容，它工作正常。

但尝试为＆gt; 50条记录执行此操作会产生性能问题。

由第三方组件呈现的angularjs指令不起作用

1 个答案: