关闭

angularjs学习之六(angularjs中directive指令的一般编程事件绑定 模板使用等)

标签: angularjs
2037人阅读 评论(0) 收藏 举报
分类:

angular js 中模板的使用,事件绑定以及指令与指令之间的交互

对应教学视频地址(需翻墙):angularjs教学视频


<!doctype html>
<html ng-app="myapp">
	<head>
		<meta charset="utf-8"/>
	</head>
	<body ng-controller="ShieldController">
		<div>
			<who></who>
		</div>
		<div>
		   <button you-btn></button>
		</div>
        <theshield reigns>343</theshield>
		<theshield reigns>fdhg</theshield>
		<theshield rollins>hhh</theshield>
		<theshield ambros>kkk</theshield>
	</body>
	<script src="./js/angular.min.js"></script>
	<script>
	   var app = angular.module('myapp',[]);

	   /*=======================1. 模板的使用 ========================*/
	   app.directive('who',function(){
	       return {
			   restrict:"E",              //元素element 的意思
			   link:function(scope,element,attrs){
				   console.log(element);
				   element[0].innerHTML = 'sdfhkj'; //这个优先级别最高
			   },
			   //templateUrl:"param.html", //这个不显示 优先级别最低
			   template:"<h1>jkdhf</h1>" //这个显示  优先级别其次
		   };
	   });

       /*=======================2. 事件的绑定 ========================*/
	   app.directive('youBtn',function(){
	       return {
			   restrict:"A", //attribute 属性的意思
			   link:function(scope,element,attrs){
                   console.log(element);
				   element[0].innerHTML = 'my btn';
				   //事件绑定
				   element.bind('mouseenter',function(){
					   element[0].innerHTML = 'your btn';
				   });
				   element.bind('mouseleave',function(){
					   element[0].innerHTML = 'her btn';
				   });
			   }
		   };
	   });
	   
       /*=======================3. 元素 属性 控制器之间的交互========================*/

	   app.controller('ShieldController',function($scope){
	       $scope.shieldNames = [];
		   this.addReigns = function(){
		       $scope.shieldNames.push("reigns:jjj");
		   }
		   this.addRollins = function(){
		       $scope.shieldNames.push("Rollins:hhh");
		   }
		   this.addAmbros = function(){
		       $scope.shieldNames.push("Ambros:ggg");
		   }
	   })
	   .directive('reigns',function(){
	      return {
			  require:"theshield",
			  link:function(scope,element,attrs,ShieldController){
                 ShieldController.addReigns();
			  }
		  };
	   })
	   .directive('rollins',function(){
	      return {
			  require:"theshield",
			  link:function(scope,element,attrs,ShieldController){
                 ShieldController.addRollins();
			  }
		  };
	   })
	   .directive('ambros',function(){
	      return {
			  require:"theshield",
			  link:function(scope,element,attrs,ShieldController){
                 ShieldController.addAmbros();
			  }
		  };
	   })
	   .directive('theshield',function(){
	       return {
			   restrict:"E",
			   controller:"ShieldController", //指定控制器
			   scope:{},                      //清空该指令处的$scope 值
			   link:function(scope,element,attrs){
			       element.bind('mouseenter',function(){  //对于该指令所对应的元素绑定对应的事件
				       console.log(scope.shieldNames);
				   });
			   }
		   };
	   });

	</script>
</html>


2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:303090次
    • 积分:4986
    • 等级:
    • 排名:第5645名
    • 原创:190篇
    • 转载:6篇
    • 译文:9篇
    • 评论:66条
    最新评论