AngularJs - UI引導酥料餅

你好，我採用了棱角分明應用中的用戶界面的自舉我想使用的用戶界面的自舉加酥料餅的，所以這就是我所做的迄今：AngularJs - UI引導酥料餅

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

當然這是行不通的:)

我的問題是：如何在模板tpl.html中注入元素a屬性？

請，任何幫助表示讚賞

來源

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

謝謝你的幫助。在你的例子中，它看起來並不像'a'標籤的'data-img'和'data-content'屬性做任何事情。我在plunkr中刪除了它們，沒有任何改變。意圖是什麼？ – matth

@matth這些屬性在OP的標記中。我只是把他們留在那裏。 – o4ohel

AngularJs - UI引導酥料餅

回答

相關問題