弹出在Angular中动态创建的元素

时间:2014-09-16 14:31:50

标签: angularjs twitter-bootstrap angular-ui

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

如果一个元素是动态创建的,并且在加载视图中不可用,则popover无法正常工作。

我怎样才能让它发挥作用?

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

1 个答案:

答案 0 :(得分:4)

您还需要使用angularjs $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