包裝AngularStrap Popover

Question

我試圖用自定義指令來包裹角帶的彈出。

彈出窗口應該能夠使用由誰使用我的指令提供的自定義模板，並且模板應該能夠使用控制器的範圍。

對於範圍部分，我發現我可以傳遞給$ popover服務控制器的範圍。

var myPopover = $popover(element, { 
       title: 'My Title', 
       placement : 'top', 
       contentTemplate: 'example.html', 
       html: true, 
       trigger: 'manual', 
       autoClose: true, 
       scope: scope 
      }); 

這裏是一個plunker：http://plnkr.co/edit/9vTzR0fKcjOlP0bNjZUf?p=preview

是任何人能解釋我爲什麼兩個按鈕打開同一酥料餅？我應該隔離範圍嗎？如果是的話，我怎麼能使用原始控制器的範圍來綁定變量？

感謝

Answer 1

是否有人能夠解釋爲什麼兩個按鈕打開相同的彈出窗口？

因爲兩個customPopover指令共享相同的範圍。您想指示指令爲單個指令創建獨立的範圍。

添加scope: true：

app.directive("customPopover", ["$popover", "$compile", function($popover, $compile) { 
    return { 
     scope: true, 
     restrict: "A", 
     link: function(scope, element, attrs) { 
      var myPopover = $popover(element, { 
       title: 'My Title', 
       placement : 'top', 
       contentTemplate: 'example.html', 
       html: true, 
       trigger: 'manual', 
       autoClose: true, 
       scope: scope 
      }); 

      scope.showPopover = function() { 
       myPopover.show(); 
      } 
     } 
    } 
}]); 

演示：http://plnkr.co/edit/2esMcQSLjDxdj7zESXD2?p=preview

Answer 2

在這種情況下的問題是，每次使用customPopover時都會將scope.showPopover。由於這種情況下的兩個實例共享相同的作用域，所以在第一個scope.showPopover被寫入的情況下，該指令再次被使用，並且scope.showPopover被寫入指向第二個元素的版本。

解決方案其實很簡單。由於您可以訪問鏈接函數中的元素，因此您可以在其中添加單擊處理程序，而不必擔心處理這種範圍衝突。這也使你的指令更加獨立。這裏是an example，它使用element.on而不是通過範圍和使用ngClick。