Question

我在弹出窗口中显示一个表单。单击按钮即可打开弹出窗口。问题是，每次单击按钮打开弹出窗口时，相同的表单都会附加到现有的弹出框中。这是我的代码：

$('.filter-node-btn').popover({     
    trigger:'click',
    html : true,
    placement: 'bottom',
    content: function() {               
        return $compile($(".filterNodeDialog").html())($scope);
    }
});

更新

我在为这个问题写一个jsfiddle时发现了这个问题。它适用于小提琴，但不适用于我当地的环境。我正在使用bootstrap js 3.1.1而对于小提琴我尝试了bootstrap js 3.0。下面是让我在boostrap.js中发出问题的一行

bootstrap 3.1.1

    Popover.prototype.setContent = function () {
          ....
          $tip.find('.popover-content')[ // we use append for html objects to maintain js events 

        this.options.html ? (typeof content == 'string' ? 'html' : 'append') : 'text' ](content) 
      ...

 }

bootstrap 3.0代码说

 Popover.prototype.setContent = function () { 
               ....
      $tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content)
 ...

 }

如果我尝试更换旧代码，它也适用于我的本地环境。 http://jsfiddle.net/46Z59/6/

我的问题是如何使用bootstrap 3.1.1修复它？

Answer 1

更新了答案

任何与DOM有关的东西都应该进入指令而不是控制器。事实上，通过转换到指令，您的问题可以轻松解决。

将popover HTML放入指令中包含的模板将导致其内容将由Angular自动编译。在这种情况下，使用jQuery从DOM中提取的内容的手册$compile - 这似乎是问题的根源 - 是不必要的。

这样的指令可能如下所示：

.directive('myPopover', function($compile){
  return {
    restrict: 'EA',
    controller: function($scope){
        $scope.clearFilter = function(){        
          $scope.filterOption = "";
        };

        $scope.setFilterOption = function(){
            console.log("filter option :",$scope.filterOption);
            if($scope.filterOption == 'hdnodes'){ }
            else if($scope.filterOption == 'gnodes'){ }
            else if($scope.filterOption == 'clusters'){ }
            else if($scope.filterOption == 'standalones'){ }
        };
    },
    link: function(scope, elem, attrs) {
      elem.popover({    
            trigger:'click',
            html : true,
          placement: 'bottom',
            content: function() {               
                return elem.find('div');
            }
        });
    },
    templateUrl: 'fn-dialog.html'
  }
})

... fn-dialog.html看起来像这样：

<!-- Button which opens popover when clicked -->
<button title="Filter" type="button" name="filter-node-btn" class="filter-node-btn">open</button>

<!-- Popover content -->
<div class="filterNodeDialog">                          
    <div class="filterCriteriaContent">    
        <form name="filterCriteriaForm">                              
            <input type="radio" name="filterOption" value="hdnodes" ng-model="filterOption" ng-change="setFilterOption();">
            <span>All HD nodes</span>           

[ the rest of the content for the popover ... ]

Plunker Demo

无论何时打开，角重复内的Bootstrap popover都会形成内容

1 个答案: