这是一个基于angulsrjs 和bootstrap样式的图片列表指令

js部分代码如下

	var app=angular.module("test",["bane/image/showgrid.html"]).directive("baneImggrid",function(){return {restrict:'EA',transclude: true,replace: false,//templateUrl: "template/image(1).html",templateUrl:"bane/image/showgrid.html",scope:{baneItems:'=',smSrc:'@',orgSrc:'@',radioText:'@',radioValue:'@',radioShow:'=',deleteShow:'=',selectItem:'=',itemDelete:'=',//beforeDelete:'&'},link:function(scope, element, attrs,contr){scope.selectItem={"cover":""};scope.orgSrc=(scope.orgSrc?scope.orgSrc:scope.smSrc);scope.smSize={};if(attrs.smWidth){scope.smSize.width=attrs.smWidth;}if(attrs.smHeight){scope.smSize.height=attrs.smHeight;}	scope.showBigBox=function(index){scope.baneItems[index].baneBigImageShow=true;							}scope.closeBox=function(index){scope.baneItems[index].baneBigImageShow=false;	}scope.deleteItem=function(index){scope.itemDelete=scope.baneItems[index];//scope.beforeDelete();scope.baneItems.splice(index, 1);}								}}});angular.module("bane/image/showgrid.html", []).run(["$templateCache", function($templateCache) {$templateCache.put("bane/image/showgrid.html",'<div class="col-xs-6 col-md-3" style="width:auto; " ng-repeat="item in baneItems ">'+'    <div class="thumbnail" style="cursor:pointer;position:relative;"  >'+'    	<img ng-src="{{item[smSrc]}}"  ng-style="smSize" ng-click="showBigBox($index)"/> '+'    	<div style=" position:absolute; bottom:4px;background: rgba(225,225,225,0.5); right: 4px;left: 4px; text-align:right;">'+'        	<span style="float:left;" ng-show="radioShow"><input type="radio"  ng-model="selectItem.cover"  value="{{item[radioValue]}}" /><label>{{radioText}}</label></span>'+'            <i class="glyphicon glyphicon-search" ng-click="showBigBox($index)" style="margin: 2px 5px;"></i>'+'            <i class="glyphicon glyphicon-trash" ng-click="deleteItem($index)" style="margin: 2px 5px;" ng-show="deleteShow"></i>'+'        </div>'+'    </div>'+'    <div class="modal fade bs-example-modal-lg in" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false" style=" padding-right: 15px; display:block" ng-show="item.baneBigImageShow">'+'		<div class="modal-backdrop fade in"></div>'+'    		<div class="modal-dialog modal-lg" style="z-index:1100;">'+'      			<div class="modal-content">'+'        			<div class="modal-header">'+'          				<button type="button" class="close" data-dismiss="modal" ng-click="closeBox($index)"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>'+'        			</div>'+'        		<div class="modal-body" style="text-align:center;">'+'       		 		<img ng-src="{{item[orgSrc]?item[orgSrc]:item[smSrc]}}" style="max-width:100%;"/>'+'        		</div>'+'      		</div>'+'    	</div>'+'  	</div>'+'</div>');
}]);

demo下载