CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-ui
JAG
JAG

Reputation: 685

Popover on dynamically created element in Angular

plunker example http://plnkr.co/edit/xbAkED?p=preview

if an element is created dynamically and not available in the view on load, popover won't work.

How can i make it work?

<script>
  angular.module('plunker', ['ui.bootstrap']);
  var testController = ['$scope', function($scope) {
    $scope.value = 'test';

  $('<button id="needsPopover" style="margin-left:10px;" popover-title="1. Lowest" popover-template="template1"  popover-placement="bottom" popover-trigger="mouseenter">Dynamicaly Created Button</button>').appendTo($('body'));
  }];


</script>

Upvotes: 1

Views: 2284

Answers (1)

xsh.7
xsh.7

Reputation: 6250

You also need to compile it using angulars $compile service:

var $button = $('<button class="btn" id="needsPopover" style="margin-left:10px;" popover-title="1. Lowest" popover-template="template1"  popover-placement="bottom" popover-trigger="mouseenter">Dynamicaly Created Button</button>');
$compile($button) ($scope);
$button.appendTo($('body'));

See Plunkr

Upvotes: 4

Related Questions