ng-click и ng-модель не работают в поповере

Question

ng-click и ng-модель не работают в поповере

2

У меня есть 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

Jose the hose 15 апр. 2015, в 18:27

Источник

1

Как выглядит ваш контроллер?
gerl 15 апр. 2015, в 16:30
0

Кроме того, что вы подразумеваете под «это не работает», это дает вам ошибку или ничего не показывает в поповере?
Ben Black 15 апр. 2015, в 16:32
0

Не могли бы вы добавить скрипку или поршень, который показывает вашу проблему? Это помогло бы
Chad Watkins 15 апр. 2015, в 16:33
0

Html связан с правильной областью? Выберите элемент кнопки в вашем любимом браузере и введите angular.element($0).scope() . Проверьте, есть ли у вас метод newQuote .
null 15 апр. 2015, в 16:44
0

вот плункер plnkr.co/edit/ANH98vlflPK9c5qA3ohO?p=preview
Jose the hose 15 апр. 2015, в 17:11

Показать ещё 3 комментария

Теги:

twitter-bootstrap

angularjs

1 ответ

Ещё вопросы

Кроме того, что вы подразумеваете под «это не работает», это дает вам ошибку или ничего не показывает в поповере?
Не могли бы вы добавить скрипку или поршень, который показывает вашу проблему? Это помогло бы
Html связан с правильной областью? Выберите элемент кнопки в вашем любимом браузере и введите angular.element($0).scope() . Проверьте, есть ли у вас метод newQuote .
вот плункер plnkr.co/edit/ANH98vlflPK9c5qA3ohO?p=preview

themyth92 · Accepted Answer · 2015-04-16T07-00-00.000Z

Вы должны создать 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

Справка:

Большое спасибо за ваш очень подробный ответ. Это действительно помогло мне. Спасибо!
Спасибо за объяснение, очень помогли.
Отлично пиши и объясни! Очень легко реализовать.