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

￡神魔★判官ぃ 2022-08-02 04:39 17阅读 0赞

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

对应教学视频地址（需翻墙）：[angularjs教学视频][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>

[angularjs]: https://www.youtube.com/watch?v=aG8VD0KvUw4