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

原创 2015年07月07日 20:10:58

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>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

菜鸟AngularJS学习之路 【第二天】。(事件绑定指令 循环输出 控制器嵌套)

学习Angularjs 的第二天 ,感觉进步很慢,但是要稳扎稳打不能囫囵吞枣,每个知识点都必须敲一敲才能有效果。 先来回顾今天的第一个 事件绑定指令 首先按照书上写的例子 绑定...

AngularJS学习笔记之directive——scope选项与绑定策略

开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细...

AngularJS学习笔记——指令之使用绑定和模板指令

数据绑定指令 内置指令的第一类是负责执行数据绑定的。数据绑定使用模型中的值,并将其插入到html文档中。 数据绑定指令: ng-bind:绑定一个HTML元素的innerText属性ng-bind...

AngularJS 使用绑定和模板指令

学习要点: 数据绑定 模板指令

学习AngularJs:Directive指令用法(完整版)

本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下...

AngularJS 学习笔记 -- 指令(Directive)

AngularJS 指令学习笔记AngularJS怎样处理指令其实是依赖于指令定义时返回的对象属性的,所以要想深入理解如何定义一个指令,首相需要理解指令定义时各个参数的含义。完整的AngularJS指...

AngularJS的directive指令执行流程学习

AngularJS的directive指令执行流程

AngularJS学习之directive自定义指令

对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能。 AngularJS应用的模块中有很多方法可以使用,其中directive()这个方法是用来定义指令的...

AngularJS事件绑定的使用详解

本文和大家分享的主要是AngularJS中事件绑定相关知识点,希望通过本文的分享,对大家学习和使用AngularJS有所帮助。   1.绑定事件:表达式、事件方法名;   2.绑定点击事件实例...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)