CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-ui
zarax
zarax

Reputation: 831

AngularUI Bootstrap Popover Not Working

Why isn't this popover working?

Plunker

<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>

When the button clicked I want it to show the popover.

Upvotes: 1

Views: 6845

Answers (2)

fiat
fiat

Reputation: 15981

My problem was that I had a bower.json as follows

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

I tricked myself into thinking I had the latest bootstrap reference through the 1.1.2 line and didn't notice the old 0.13.1 which the web app was actually using.

ie: My web app was referencing the old version but I thought I was referencing the new version.

Removing the angular-ui-bootstrap bower package and fixing the version on angular-bootstrap made everything work.

The other final gotcha was using single quotes when specifying the inline template - ie: uib-popover-template="'mytemplate'"

Upvotes: 1

S.Klechkovski
S.Klechkovski

Reputation: 4045

There is no issue with the code added in the question but I have found two issues in the posted Plunker.

  • ui.bootstrap module was not initialized

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

  • UI Bootstrap templates file was not included

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

This is the working Plunker of your code.

Upvotes: 3

Related Questions