在同一视图中使用具有不同值的相同指令

时间:2016-04-18 09:36:48

标签: angularjs angularjs-directive

我有两个标签,每个标签包含一组我已设置为指令的缩略图。 Tab也是通过指令和缩略图来实现的。要推入缩略图的数据存储在常量文件中。但每个标签缩略图数据都不同。我该如何实现?

用于设置标签和缩略图:

var t = require("./test");

缩略图HTML:

<tabset> <tab heading="{{heading.title}}" id="heading1" set-thumb="setThumbnail(arg)">
        <thumbnail></thumbnail>
        </tab> <tab heading="{{heading1.title}}" id="heading2" set-thumb="setThumbnail(arg)">
        <thumbnail></thumbnail>
        </tab> </tabset>

缩略图指令:

<div class="row" style="padding: 20px;">
<div class="col-md-3" ng-repeat="data in thumbnailDetails">
    <div class="thumbnail-sim">
        <img src="resources/images/Sim-thumbnail.png" alt="sim"
            class="thumbnail-img">
        <div class="thumbnail-caption">
            <div class="thumbnail-name">{{ data.name }}</div>
            <div class="thumbnail-date">{{ data.time }}</div>
            <div class="thumbnail-details">
                <a href="#" type="button" style="text-decoration: none;">{{ data.details }}</a>
            </div>
        </div>
    </div>
    <br>
</div>

服务部分方法:

angular.module('thumbnailDirectiveModule', [])
.directive('thumbnail', function() {
return {
      restrict: 'E',
      templateUrl: 'UI/templates/thumbnail.html'
    };
});

Tab指令:

s.getThumbnail = function(thisId){
    if(thisId === 'heading1'){
        return thumbnailDetails1;
    }else if (thisId === 'heading2'){
        return thumbnailDetails2;
    }

};

0 个答案:

没有答案