AngularJs - UI Bootstrap Popover

Question

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

The popover-template scope is same as where you use the popover directive. So, does this help you? — o4ohel
– o4ohel, Commented Jan 3, 2016 at 22:04
exactly, so just use scope variables in your template instead of "injecting" attributes from the element. Makes sense? — o4ohel
– o4ohel, Commented Jan 3, 2016 at 22:09

o4ohel · Accepted Answer · 2016-01-03 22:35:03Z

9

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'
    }   
  ]; 
});

answered Jan 3, 2016 at 22:35

o4ohel

1,78913 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

matth Over a year ago

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 a year ago

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

Collectives™ on Stack Overflow

AngularJs - UI Bootstrap Popover

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related