文章/答案/技术大牛

发布

社区首页 >问答首页 >在Angular指令模板中使用Qtip2

问在Angular指令模板中使用Qtip2
EN

Stack Overflow用户

提问于 2015-11-17 10:49:06

回答 1查看 634关注 0票数 0

我正在尝试使用带有Angular指令模板的Qtip2。

在我的Angular Directive模板中是按钮，它们在一个angular ng-repeat循环中。在这个ng-repeat循环中，有一个名为'value‘的唯一变量，它是每个按钮的名称。

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

指令模板如下所示：

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

我如何实现这一点？我尝试使用ng-mouseover="qtipping(value)“向按钮添加一个属性，但不起作用。

我的link函数中的代码看起来像这样：

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
            }
        })
}

而不使用函数。但是我需要一个函数来从模板dom中提取'value‘。我该怎么做呢？我在Angular上也是个菜鸟。

angularjs

回答 1

Stack Overflow用户

发布于 2015-11-17 15:43:27

您应该创建一个单独的指令来在每个按钮上显示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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33748297

复制

相似问题

问在Angular指令模板中使用Qtip2
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Angular指令模板中使用Qtip2EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Angular指令模板中使用Qtip2
EN