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在directive的template中使用ng-template

今天为大家介绍一下在angularjs的directive中使用ng-template的方法。 1.我们的问题是什么? var page = angular.module('ausp.di...
  • pkpk20044
  • pkpk20044
  • 2016年07月26日 14:41
  • 4618

AngularJS中locationchange、routechange事件

假设有这样一场景:在用户切换到另外一个route时,需要检查当前表单(内容)是否已保存?考虑下在AngularJS中如何实现? 我们首先来分析下,场景中有那些事件流。 ①:用户编辑了表单 ...
  • spy19881201
  • spy19881201
  • 2013年12月03日 16:51
  • 26770

angularJS动态生成的页面中,ng-click无效解决办法

今天碰到了一个这样的需求,在自己写的动态的页面中,写入的AngularJS无效不能点击响应事件,以下给出代码以及解决方案 1.首先将我们要赋值给页面的数据new一下 [ja...
  • mingqingyuefeng
  • mingqingyuefeng
  • 2017年08月27日 15:47
  • 460

Angular中element具有的方法

在写指令时link函数中有一个element 参数,这里可以像操作jquery一样操作dom, 所以搜集了一下该element具有的方法 addClass()-为每个匹配的元素添加指定的样式类名 ...
  • u014788227
  • u014788227
  • 2015年12月29日 19:09
  • 1989

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

angular js 中模板的使用,事件绑定以及指令与指令之间的交互 对应教学视频地址(需翻墙):angularjs教学视频 ...
  • wujiangwei567
  • wujiangwei567
  • 2015年07月07日 20:10
  • 2401

(三)Angular控制器,Module.controller() 控制器,单向绑定和双向绑定

AngularJS很重要的一个特性就是实现模块化编程,我们可以通过以下方式创建一个模块,对页面进行功能业务上的划分// 创建一个名字叫MyApp的模块,第二个参数指的是该模块依赖那些模块 var ap...
  • action_xing
  • action_xing
  • 2016年09月05日 09:28
  • 320

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

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

AngularJs 指令directive之controller,link,compile

关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller。不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名。另外一个需知道的...
  • alex8046
  • alex8046
  • 2016年08月24日 14:08
  • 1621

angularJS之link函数对元素事件绑定或属性的操作

Document
  • u010578251
  • u010578251
  • 2015年11月07日 15:23
  • 1768

angular学习(三)—— Controller

转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/51190079 Controller介绍 在angular中,control...
  • lastsweetop
  • lastsweetop
  • 2016年04月21日 18:36
  • 11016
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angularjs学习之六(angularjs中directive指令的一般编程事件绑定 模板使用等)
举报原因:
原因补充:

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