这是一个基于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",
	'
'+ '
'+ ' '+ '
'+ ' '+ ' '+ ' '+ '
'+ '
'+ ' '+ '
' ); }]);

demo