Question

我在一个似乎无法正常工作的bootstrap popover中进行了一次点击。当我将它从弹出窗口移到页面中时，它似乎有效。此外，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>

这是因为pop在dom中创建而且angular不知道它存在吗？任何想法我怎么能让它工作？感谢

编辑：

这是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);
    };

编辑2

这是一个显示问题的plunker - 当ng-click =“newQuote（）”被触发时，不显示警报 http://plnkr.co/edit/ANH98vlflPK9c5qA3ohO?p=preview

Answer 1

您应创建Directive以使角色与Bootstrap Popover一起使用。使用Bootstrap Popover时，您可以在Developer控制台中查看。它实际上不会重复使用您预定义的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。解决此问题的一种方法是在将directive传递给compile之前创建html和DOM个Bootstrap Popover内容。

我创建了这个fiddle来证明这个想法。

如你所见：

我已经为您编译content并将其绑定到当前的scope
```
$compile(content)(scope);
```

在将DOM传递给popover

之前

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

通过这种方式可以让Angular了解添加的DOM新内容并相应地完成其工作。

此外，实际上有一些directives可与Bootstrap Popover一起使用，您可以查看而不是创建新的directives

参考：

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

1 个答案: