У меня есть ng-click внутри 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>
Это потому, что popover создается в dom и угловой не знает, что он существует? Любые идеи, как я могу заставить его работать? благодаря
РЕДАКТИРОВАТЬ:
Вот новыйQuote
$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
Вот плункер, показывающий проблему - предупреждение не отображается, когда ng-click = "newQuote()" уволен http://plnkr.co/edit/ANH98vlflPK9c5qA3ohO?p=preview
Вы должны создать 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
. Один из способов обойти это - создать directive
и compile
ваш html
контент, прежде чем передавать этот фрагмент DOM
в Bootstrap Popover
.
Я создал эту скрипку, чтобы продемонстрировать эту идею.
Как вы видете:
Я собираю content
и привязываю его к текущей scope
$compile(content)(scope);
Прежде чем перейти этот кусок из DOM
в popover
var options = {
content: compileContent,
html: true,
title: title
};
$(elem).popover(options);
Таким образом, чтобы Angular мог понять, что новый кусок DOM
добавлен и выполняет свою работу соответственно.
Кроме того, на самом деле есть довольно некоторые directives
которые работают с Bootstrap Popover
которые вы можете взглянуть, вместо того, чтобы создавать новые directives
Справка: