CODEWITHSUNDEEP
angularjstwitter-bootstrap
Jose the hose
Jose the hose

Reputation: 1895

ng-click and ng-model not working in a popover

I have an ng-click in in a bootstrap popover that doesnt seem to work. when I move it out of the popup into the page it seems to work. Also the ng-model value doesnt seem to update either.

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

Is this because the popover is created in the dom and angular does not know it exists? Any ideas how I can get it to work? Thanks

EDIT:

Here is the 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

Here is a plunker showing the issue - the alert is not displayed when ng-click="newQuote()" is fired http://plnkr.co/edit/ANH98vlflPK9c5qA3ohO?p=preview

Upvotes: 3

Views: 7513

Answers (1)

themyth92
themyth92

Reputation: 1738

You should create a Directive to make angular works with Bootstrap Popover. You can take a look in your Developer console when using Bootstrap Popover. It actually does not reuse the DOM that you predefined - ie :

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

But add in a new piece of DOM - ie

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

Therefore Angular will not understand new piece of DOM because it has not compiled yet - ie : You cannot use ng-click as well as ng-modal. One way to work around this is to create a directive and compile your html content before passing that piece of DOM to Bootstrap Popover.

I have created this fiddle to demonstrate this idea.

As you can see :

  1. I have compile you content and bind it to current scope

    $compile(content)(scope);

  2. Before passing that piece of DOM to popover

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

With this way to can let Angular understand new piece of DOM added and do its work correspondingly.

Furthermore, actually there quite some directives that works with Bootstrap Popover that you can take a look at instead of creating new directives

  1. AgularUI Bootstrap
  2. Angular Strap

Reference :

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

Upvotes: 10

Related Questions