javascript - 无法通过 AngularJS 激活 Bootstrap 弹出窗口

Question

我angularjs在我的项目中使用。我想使用bootstrap popover当用户点击链接时会出现的。弹出框应该显示一个输入字段，用户应该在其中输入一些单词。

<span style="font-size:14px; word-wrap: break-word;" ng-bind-html="linkifyWord(message.expert_advice)"> </span>

现在linkifyWord定义了函数，index.js其中基本上将字符串中的某些单词作为链接并将包含 html 的字符串发送回。

原句： lopa 按类型划分的事件数

包含html返回的字符串linkifyWord如下

number of <a href='#' data-html='true' data-toggle='popover' rel='popover' title=problems,issues data-content="<p> <input type='text'/> </p> <p> <input type='submit' value='Submit'/> </p>"> incidents </a> by <a href='#' data-html='true' data-toggle='popover' rel='popover' title=categories,nature data-content="<p> <input type='text'/> </p> <p> <input type='submit' value='Submit'/> </p>"> type </a> for lopa

所以最终结果应该是这样的

洛帕按类型划分的事件数量

正如您在上面看到的，它将两个单词作为链接。现在我不打算分享如何将常规语句转换为上述语句的确切逻辑，因为它涉及调用一些 api、获取数据、处理它等等。

现在我可以得到上面的输出了。但是接下来应该发生的是，当您单击链接时，popup应该会出现一个其中包含input field用户可以输入一些消息并点击的地方submit。但我无法获得popup. 我基本上使用的是bootstrap popup.

Bootsrap我有在我的项目中使用的所有必要的导入。我将在下面分享导入，以便你们检查

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

有趣的是，当我尝试在类似的在线编译器中运行它时jsfiddle，我得到了预期的弹出窗口。这是下面的链接

http://jsfiddle.net/retkza54/

那为什么它在我的系统中不起作用？我究竟做错了什么？

标签： javascripthtmlangularjstwitter-bootstrap-3