Question

我正在尝试将Qtip2与Angular Directive Template一起使用。

我的Angular Directive Template内部是按钮，它们位于角度ng-repeat循环内。在这个ng-repeat循环中，有一个名为'value'的唯一变量，它是每个按钮的名称。

所以我想要的是使用Qtip2这个指令模板，它将显示'value'工具提示。

指令模板如下所示：

<button ng-mouseover="qtipping(value)"> {{value}} </button>

我该如何实现？我尝试使用ng-mouseover =“qtipping（value）”为按钮添加属性，但它不起作用。

我的链接函数中的代码如下所示：

link: function(scope,element,attrs){
    scope.qtipping = function(value){
        $("button").qtip({
            content:{
                text: value //This will appear the unique name of the button
            }
        })
    }
}

当我运行代码时，基本上没有任何反应。我没有任何东西鼠标悬停在按钮上。没错也。

有效的代码是：

link: function(scope,element,attrs){
        $("button").qtip({
            content:{
                text: "TestMessage" //This will appear the unique name of the button
            }
        })
}

不使用功能。但是我需要一个FUNCTION来从模板dom中提取'value'。我该怎么做呢？我也是Angular中的小伙伴。

Answer 1

您应该创建一个单独的指令，以在每个按钮上显示qtip。这是一个将qtip添加到元素的指令：

.directive('qtip', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      $(element).qtip({
        content: {
          text: attrs.qtipText
        }
      });
    }
  };
}

像这样使用它：

<button qtip qtip-text="{{value}}"> {{value}} </button>

编辑：代码缺少大括号。修正了这里有一个工作的掠夺者：http://plnkr.co/edit/uVdpf5gLILd82dr62V03?p=preview

在Angular Directive Template中使用Qtip2

1 个答案: