Question

基于一个jsfiddle我做了一个指令，它显示了Bootstrap Popover中的一些信息，当它悬停在Bootstrap徽章上或点击它时。它的工作正常，只要它是独立的＆＃34;

(need to add code here)

按钮和井中的第一个徽章都很好。

在ng-repeat中动态生成id的徽章根本没有做任何事情。对于带有固定ID的徽章，只有第一个有效（因为它被初始化了2次），这是有道理的。

我不明白的是，在您可以看到的控制台日志中，找到并设置了ng-repeat中的所有徽章。

不知道，在哪里看。有什么想法吗？

Answer 1

我建议你尝试依赖angular-ui bootstrap库来完成你想要的功能。但基于您依赖于使用id属性以及您希望使用动态生成的ID，我认为您的问题与使用popover属性获取元素的方式相同。您不需要$("#" + elemId)来获取弹出框的元素，您已经将元素的引用作为链接函数中的参数之一。

现在你有：

testApp.directive "popoverClickNHover", ->
  restrict: "A"
  link: (scope, element, attrs) ->
    asPopover = undefined
    console.log "popoverClickNHover"
    asPopover = (elemId) ->
      clickToggle = undefined
      enterShow = undefined
      exitHide = undefined
      popoverTriggerElem = undefined
      console.log "asPopover: " + elemId
      popoverTriggerElem = $("#" + elemId)
      console.log popoverTriggerElem
      popoverTriggerElem.data "state", "hover"
      ...
      return

    asPopover attrs["id"]

但是你可以使用element函数给你的link，它会起作用：

testApp.directive "popoverClickNHover", ->
  restrict: "A"
  link: (scope, element, attrs) ->
    asPopover = undefined
    console.log "popoverClickNHover"
    asPopover = () ->
      clickToggle = undefined
      enterShow = undefined
      exitHide = undefined
      popoverTriggerElem = element /* just use the element, no need to do $("#"+elemId) */
      console.log popoverTriggerElem
      popoverTriggerElem.data "state", "hover"
      ...
      return

    asPopover

以下是使用链接函数中的元素的示例：http://plnkr.co/edit/jA6zc0JQKiQaoQNo7BaH?p=preview

这是使用angular-ui / bootstrap的另一个例子： http://plnkr.co/edit/jpRh0fJfiFnsOavpW55s?p=preview

Angular Bootstrap指令不适用于ng-repeat

1 个答案: