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

Question

我在似乎不起作用的引导弹出窗口中有一个 ng-click in。当我将它从弹出窗口移到页面中时，它似乎可以工作。 ng-model 的值似乎也没有更新。

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

这是因为popover是在dom中创建的，而angular不知道它存在吗？有什么想法可以让它工作吗？谢谢

编辑：

这是新的报价

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

编辑 2

这是一个显示问题的 plunker - 触发 ng-click="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