AngularUI Bootstrap 弹出窗口不工作

Question

为什么这个弹出窗口不起作用？

<body>
<div class="flexbox margin-top">
  <div class="flexible"></div>
  <div class="flexbox">
    <button class="btn btn-sm btn-success" popover-template="'template.html'" popover-placement="left">Click</button>
  </div>
</div>
<script type="text/ng-template" id="template.html" >
<div>
  <textarea>Some text, some text, some text</textarea>
  <button class="btn btn-sm">Update</button>
  </div>
</script>

单击按钮时我希望它显示弹出窗口。

Answer 1

问题中添加的代码没有问题，但我在发布的帖子中发现了两个问题 Plunker。

ui.bootstrap模块未初始化

angular.module('app', ['ui.bootstrap']);

UI Bootstrap 未包含模板文件

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>

这是您的代码的工作 Plunker。

Answer 2

我的问题是我有一个 bower.json 如下

"angular-bootstrap":"0.13.1"
<other references in between to make two versions not visually obvious> 
"angular-ui-bootstrap":"1.1.2"

我自欺欺人地认为我通过 1.1.2 行获得了最新的 bootstrap 参考，但没有注意到网络应用程序实际使用的旧 0.13.1。

即：我的网络应用引用了旧版本，但我认为我引用的是新版本。

删除 angular-ui-bootstrap bower 包并将版本修复为 angular-bootstrap 使一切正常。

另一个最后的陷阱是在指定内联模板时使用单引号 - 即：uib-popover-template="'mytemplate'"

AngularUI Bootstrap 弹出窗口不工作

AngularUI Bootstrap Popover Not Working

twitter-bootstrap

angularjs

angular-ui