Angular-UI:Popover不起作用

时间:2016-05-25 16:04:19

标签: angularjs angular-ui-bootstrap angular-ui

这是我创建的一个示例,但它似乎不起作用:

<button popover-placement="bottom" popover-template="'calendar.html'" popover-trigger="click"><h1>Hello Plunker!</h1></button>

<script id="calendar.html" type="text/ng-template">
  <datepicker ng-model="date" show-weeks="false"></datepicker>
</script>

DEMO

我也试过在popover-template属性中没有使用撇号,但没有用。

有人能告诉我实施的错误吗?提前谢谢!

1 个答案:

答案 0 :(得分:2)

一些问题:

你在角度之前加载了ui-bootstrap,所以它失败了(我在angular.js之后放了ui-bootstrap):

<script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="angularjs@1.5.5"></script>
<script data-require="ui-bootstrap@*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>

没有调用datepicker指令,因为它需要“uib-”(注意uib-datepicker):

<button popover-placement="bottom" uib-popover-template="'calendar.html'" popover-trigger="click"><h1>Hello Plunker!</h1></button>

还没有调用datepicker指令,因为它需要“uib-”(注意uib-datepicker):

<script id="calendar.html" type="text/ng-template">
  <uib-datepicker ng-model="date" show-weeks="false"></datepicker>
</script>

http://plnkr.co/edit/wXJp2aMBOci2heugHAeQ?p=preview