AngularJS中directive指令使用之事件绑定与指令交互用法示例
更新时间：2016年11月22日 11:42:22 作者：栁罗风尘
这篇文章主要介绍了AngularJS中directive指令使用之事件绑定与指令交互用法,结合实例形式分析了directive指令在模板的使用，事件的绑定及元素、属性、控制器之间的交互相关操作技巧,需要的朋友可以参考下
本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法。分享给大家供大家参考，具体如下：
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程序设计有所帮助。
相关文章
这篇文章主要给大家介绍了关于Angular学习教程之RouterLink花式跳转的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2018-05-05
这篇文章主要为大家介绍了Angular懒加载动态创建显示该模块下声明的组件，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-05-05
这篇文章主要给大家介绍了关于Angular4学习教程之HTML属性绑定的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要给大家介绍了关于Angular4绑定html内容出现警告的处理方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
这篇文章主要介绍了AngularJS 应用模块化的使用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
AngularJS的ng-repeat指令与scope继承关系实例详解
这篇文章主要介绍了AngularJS的ng-repeat指令与scope继承关系,结合实例形式通过ng-repeat指令详细分析了scope继承关系,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了Angular2 NgModule 模块详解的相关资料,并附简单实例，需要的朋友可以参考下2016-10-10
今天小编就为大家分享一篇浅谈angular2子组件的事件传递(任意组件事件传递)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
AngularJS基础 ng-readonly 指令简单示例
本文主要介绍AngularJS ng-readonly 指令,这里对ng-readonly指令的资料做了整理，有学习AngularJS 指令的同学可以参考下2016-08-08
AnjularJS中$scope和$rootScope的区别小结
这篇文章给大家整理了关于AnjularJS中$scope和$rootScope的区别，文中运用实例代码介绍的很详细，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-09-09
最新评论