AngularJS - Tippy在ng-repeat中的最后一项不起作用

Question

我有一个angularjs组件(不幸的是，这是必须的)，它在ng-repeat中呈现。

<parent-li ng-repeat="item in layout">
<component-with-tippy item="item"></component-with-tippy>
</parent-li>

组件有一个提示，我通过属性配置实例化它

<div>
<button data-tippy-content="This is the button"></button>
</div>

componentWithTippy.js在控制器中有这个:

// Tippy
tippy('[data-tippy-content]',
{
trigger: 'mouseenter',
}
)

我遇到的问题是，tippy在布局数组中除最后一项外的所有项目上都有效。如果我在布局数组中添加了一个项目，那么tippy就会在之前的最后一个项目上工作，但不会在新的最后一个项目上工作。

我控制台。记录项目，看看最后一个是否有任何不同，但它没有。

这是angularjs的init吗?

Answer 1

您需要的是在组件准备好后调用tippy。在angularjs中，你可以通过两种方式实现:

解决方案Ⅰ。使用$timeout，不要延迟:

$timeout(function () {
tippy('[data-tippy]', {
content: "I'm a Tippy tooltip!",
});
});

解决方案ⅠⅠ。使用Angular的jqLite提供的.ready():

$element.ready(function () {
tippy('[data-tippy]', {
content: "I'm a Tippy tooltip!",
});
});