CODEWITHSUNDEEP
angularjsangular-ui-bootstrapangular-ui
softzer0
softzer0

Reputation: 465

Angular-UI: Popover doesn't work

Here is an example that I've created, but it doesn't seem to work:

<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

I've also tried without using apostrophes in the popover-template attribute, but no avail.

Can someone tell me where I'm wrong with the implementation? Thanks in advance!

Upvotes: 1

Views: 1322

Answers (1)

Brian
Brian

Reputation: 5049

A few issues:

You were loading ui-bootstrap before angular, so it failed (I put ui-bootstrap after angular.js):

<script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="[email protected]"></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>

The datepicker directive was not being called, because it requires "uib-" (note uib-datepicker):

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

The datepicker directive was also not being called, because it requires "uib-" (note 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

Upvotes: 2

Related Questions