javascript - qtip2 与 AngularJS 的基本使用

Question

我正在尝试在 ng-repeater 中使用来自 qtip2 的工具提示。

我正在使用简单的标题属性:

$('[title!=""]').qtip();

qtips 显示在常规项目中。但是，它们不会显示在 Angular 中继器内。检查元素，我可以看到它确实用旧标题替换了标题。

这里是傻瓜:http://plnkr.co/edit/pewJYxbyBdMk5kqm01Bm?p=info

Answer 1

这里的问题是您将 qtip 绑定(bind)到尚不存在的元素。最好的办法是创建一个 qtip 指令，您可以将其添加到元素中并在创建后运行 qtip() 方法。

例子:

// remove $('[title!=""]').qtip(); from top of js file
app.directive('qtip', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.qtip({ content: attrs.qtip});
    }
  };
});

然后在你的 html 中:

<span qtip="{{friend.gender}} ({{friend.age}} years old)"> [{{$index + 1}}] {{friend.name}}</span>

Updated plunkr .