angularjs 的一个图片列表指令

页面导航:首页 > 网络编程 > JavaScript > angularjs 的一个图片列表指令

angularjs 的一个图片列表指令

来源: 作者: 时间:2016-02-05 11:06 【

这是一个基于angulsrjs 和bootstrap样式的图片列表指令js部分代码如下var app=angular module( test ,[ bane image showgrid html ]) directive( baneImggrid ,function(){return { restr

这是一个基于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

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<