AngularJs - UI Bootstrap поповер

Здравствуй Я использую UI boostrap внутри углового App Я хотел бы добавить поповер с помощью пользовательского интерфейса boostrap, так это то, что я до сих пор:AngularJs - UI Bootstrap поповер

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

А затем ввожу атрибуты: data-img , data-title, data-content в этом шаблоне 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>

конечно, это не работает :)

Мой вопрос: как добавить элемент a атрибутов в шаблон tpl.html?

Пожалуйста, любая помощь приветствуется

источник

2016-01-03 Nabil Lemsieh

Область поповер-шаблон такой же, как, где вы используете директиву поповер. Итак, это вам поможет? – o4ohel

Да, они точно в той же области –

, поэтому просто используйте переменные области видимости в шаблоне вместо «впрыскивания» атрибутов из этого элемента. Имеет смысл? – o4ohel

Вот 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>

Ctrl Код:

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

источник

2016-01-03 22:35:03 o4ohel

Спасибо, это было полезно. В вашем примере, однако, похоже, что свойства 'data-img' и' data-content' тега 'a' ничего не делают. Я удалил их в plunkr, и ничего не изменилось. В чем заключалось намерение? – matth

@matth эти атрибуты были в разметке OP. Я просто оставил их там. – o4ohel

AngularJs - UI Bootstrap поповер

ответ

Смежные вопросы