AngularJs - UI Bootstrap Popover

16,837

Here's a plnkr showing how to use scope variable in the popover template.

Simplified markup & template:

<body ng-controller="MainCtrl">
<ul>
  <li ng-repeat="link in links">
    <a uib-popover popover-trigger="mouseenter" popover-placement="bottom" uib-popover-template="'tpl.html'" data-img="http://domain.com/img1.jpg" data-content = "Link 1 content...">{{link.label}}</a>
  </li>
</ul>

<script type="text/ng-template" id="tpl.html">
  <div class="popover-content">
    <div>
      <img ng-src="http://domain.com/{{link.img}}" class="md-card-image"/>
      <div>
          <span>{{link.title}}</span>
      </div>
      <div>{{ link.content }}</div>
    </div>
  </div> 
</script>

Ctrl Code:

app.controller('MainCtrl', function($scope) {
  $scope.links = [
    {
      label: 'Link 1',
      title: 'Link 1 title',
      content: 'Link 1 content',
      img: 'img1.jpg'
    },
    {
      label: 'Link 2',
      title: 'Link 2 title',
      content: 'Link 2 content',
      img: 'img2.jpg'
    },
    {
      label: 'Link 3',
      title: 'Link 3 title',
      content: 'Link 3 content',
      img: 'img3.jpg'
    }   
  ]; 
});

16,837

Author by

Nabil Lemsieh

Updated on June 09, 2022

Comments

Nabil Lemsieh almost 2 years

Hello I'm using UI boostrap within Angular App I would like to add Popover using UI boostrap, so this what I did so far:

 <a popover popover-template="'tpl.html'" data-img="http://domain.com/img1.jpg" data-title="Link 1 title" data-content = "Link 1 content...">Link 1</a>
 <a popover popover-template="'tpl.html'" data-img="http://domain.com/img2.jpg" data-title="Link 2 title" data-content = "Link 2 content...">Link 2</a>
 ...
 <a popover popover-template="'tpl.html'" data-img="http://domain.com/imgn.jpg" data-title="Link n title" data-content = "Link n content...">Link n</a>

And then inject attributes : data-img, data-title, data-content in this template tpl.html:

 <div class="popover-content">
 <md-card>
    <img ng-src="{{$img}}" class="md-card-image" >
    <md-card-title>
      <md-card-title-text>
        <span class="md-headline">{{ $title}}</span>
      </md-card-title-text>
    </md-card-title>
    <md-card-content>
    {{ $content }}
    </md-card-content>
  </md-card>
</div>

Of course it doesn't work :)

My question is : how to inject element a attributes in the template tpl.html?

Please, any help is appreciated

matth over 6 years

Thanks this was helpful. In your example though, it doesn't seem like the data-img and data-content properties of the a tag do anything. I deleted them in the plunkr and nothing changed. What was the intent?
o4ohel over 6 years

@matth those attributes were in the OP's markup. I just left them there.