AngularJs - UI 引导弹出框答案

【问题标题】：AngularJs - UI Bootstrap PopoverAngularJs - UI 引导弹出框
【发布时间】：2016-01-03 21:58:16
【问题描述】：

您好，我在 Angular 应用程序中使用 UI boostrap 我想使用 UI boostrap 添加 Popover，所以这是我到目前为止所做的：

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

然后在这个模板tpl.html中注入属性：data-img、data-title、data-content：

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

当然不行:)

我的问题是：如何在模板tpl.html 中注入元素a 属性？

拜托，感谢任何帮助

【问题讨论】：

popover-template 范围与您使用 popover 指令的范围相同。那么，这对您有帮助吗？
是的，它们在同一个范围内
完全正确，所以只需在模板中使用范围变量，而不是从元素中“注入”属性。有意义吗？

标签： angularjs angular-ui-bootstrap

【解决方案1】：

这是一个plnkr，展示了如何在弹出框模板中使用范围变量。

简化的标记和模板：

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

控制码：

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

【讨论】：

谢谢，这很有帮助。不过，在您的示例中，a 标记的 data-img 和 data-content 属性似乎没有任何作用。我在 plunkr 中删除了它们，但没有任何改变。目的是什么？
@matth 这些属性在 OP 的标记中。我只是把它们留在那里。