ng-click和ng-model在弹出窗口中不起作用

Question

我在一个似乎无法工作的bootstrap弹出窗口中单击ng。当我将它从弹出窗口移出到页面中时，它似乎可以工作。此外ng模型值似乎也没有更新。

<div id="popover-content" class="hide"> 
<input type="text" placeholder="Quote ID" ng-model="selectedItems.quote.label"> 
<button type="button" ng-click="newQuote()">New quote</button> 
</div> 

这是因为弹窗是在dom中创建的，角度不知道它存在吗？任何想法，我怎么才能让它工作？由于

编辑：

这里是newQuote

$scope.newQuote = function() { 
     $scope.selectedItems.quote = angular.copy(defaultQuote); 

     $scope.solution.quotes.push($scope.selectedItems.quote); 

     $scope.selectedItems.quote.label = 'New Quote'; 

     $scope.addMessage('Quote created successfully', 2); 
    }; 

EDIT 2

下面是该问题的一个plunker - 不显示警报时NG-点击=“newQuote（） “被解雇 http://plnkr.co/edit/ANH98vlflPK9c5qA3ohO?p=preview

Answer 1

您应该创建一个Directive与Bootstrap Popover。使用Bootstrap Popover时，您可以在开发人员控制台中查看。它实际上不会重用DOM你预先定义 - 即：

<input type="text" placeholder="Quote ID" ng-model="selectedItems.quote.label"> 
<button type="button" ng-click="newQuote()">New quote</button> 

但增加了一个新的一块DOM - 即

<div class="popover fade bottom in" role="tooltip" id="popover770410" style="top: 30px; left: 0px; display: block;"> 
    <div class="arrow" style="left: 15.9420289855072%;"> 

     </div><h3 class="popover-title">New quote</h3><div class="popover-content"> 
     <input type="text" placeholder="Quote ID" ng-model="selectedItems.quote.label" class="ng-pristine ng-untouched ng-valid"> 
     <button type="button" ng-click="newQuote()">New quote</button> 

    </div> 
</div> 

因此Angular不会明白新资料片DOM，因为它有没有已编译 - 即：您不能使用ng-click以及ng-modal。解决此问题的一种方法是在将DOM传递到Bootstrap Popover之前，创建一个directive和compile您的html内容。

我已经创建了这个fiddle来演示这个想法。

正如你可以看到：

1. 我编译你content并将其绑定到当前scope

   $compile(content)(scope); 
   

2. 那块DOM传递给popover

   var options = { 
       content: compileContent, 
       html: true, 
       title: title 
   }; 
   $(elem).popover(options); 
   

之前

用这种方式可以让Angular了解新增加的一块DOM并做相应的工作。

而且，居然有相当长的一段directives与Bootstrap Popover的作品，你可以看看，而不是创造新的directives

1. AgularUI Bootstrap
2. Angular Strap

参考：

1. http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service
2. twitter bootstrap popover doesn't work with angularjs