包含 Bootstrap 弹出框的 AngularJS 动态模板答案

【问题标题】：AngularJS Dynamic Template containing Bootstrap Popover包含 Bootstrap 弹出框的 AngularJS 动态模板
【发布时间】：2015-08-10 02:22:06
【问题描述】：

我有一个 AngularJS 应用程序，它有一个动态添加的表单元素，其中包含一个 Bootstrap 弹出窗口。单击弹出框时，不会弹出任何内容。我知道弹出框是“选择加入”的，并且在我的 index.html 文件中包含了所需的 Javascript。但是，单击模板表单中的按钮时不会出现弹出框。如果我将弹出框放在动态表单之外（在 index.html 中），则会显示弹出框。有什么建议吗？

弹出框按钮（index.html 和 phone-number.template.html）：

<button type="button" class="btn btn-info" data-toggle="popover" data-trigger="focus"
  title="Works outside of template!" 
  data-content="The popover works when not in the template form!  Odd!" >
  <span class ="glyphicon glyphicon-question-sign"></span> 
</button>

选择加入的代码（index.html）：

<script>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover();   
});
</script>

谢谢，JR

【问题讨论】：

标签： javascript html angularjs twitter-bootstrap

【解决方案1】：

您正在准备好文档中启动弹出框，但它是在指令加载它的 html 之前启动的。您需要在指令加载时启动它。

添加一个链接函数把popover init放在那里

这样试试

app.directive('phoneNumber', function(){
  return {
    replace:true,
     scope: {
      ngModel: '=',
    },
    templateUrl: "phone-number.template.html",
    link:function($scope,element,attrs){
     $('[data-toggle="popover"]').popover();   
    }
  }
});

【讨论】：