AngularJSのディレクティブで使用されるイベントバインディングと命令のやりとりの例

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

この記事では、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プログラミングの皆さんに役立つことを願っています。


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ