如果el的值是this,可省略,即所有的el:this都可以不写 日期框设置为disabled时,禁止更改日期(不d出选择框) 如果没有定义onpicked事件,自动触发文本框的onchange事件 如果没有定义oncleared事件,清空时,自动触发onchange事件
本文实例讲述了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/angularminjs"></script>
<script>
var
app
=
angularmodule('myapp',[]);
/=======================1
模板的使用
========================/
appdirective('who',function(){
return
{
restrict:"E",
//元素element
的意思
link:function(scope,element,attrs){
consolelog(element);
element[0]innerHTML
=
'sdfhkj';
//这个优先级别最高
},
//templateUrl:"paramhtml",
//这个不显示
优先级别最低
template:"<h1>jkdhf</h1>"
//这个显示
优先级别其次
};
});
/=======================2
事件的绑定
========================/
appdirective('youBtn',function(){
return
{
restrict:"A",
//attribute
属性的意思
link:function(scope,element,attrs){
consolelog(element);
element[0]innerHTML
=
'my
btn';
//事件绑定
elementbind('mouseenter',function(){
element[0]innerHTML
=
'your
btn';
});
elementbind('mouseleave',function(){
element[0]innerHTML
=
'her
btn';
});
}
};
});
/=======================3
元素
属性
控制器之间的交互========================/
appcontroller('ShieldController',function($scope){
$scopeshieldNames
=
[];
thisaddReigns
=
function(){
$scopeshieldNamespush("reigns:jjj");
}
thisaddRollins
=
function(){
$scopeshieldNamespush("Rollins:hhh");
}
thisaddAmbros
=
function(){
$scopeshieldNamespush("Ambros:ggg");
}
})
directive('reigns',function(){
return
{
require:"theshield",
link:function(scope,element,attrs,ShieldController){
ShieldControlleraddReigns();
}
};
})
directive('rollins',function(){
return
{
require:"theshield",
link:function(scope,element,attrs,ShieldController){
ShieldControlleraddRollins();
}
};
})
directive('ambros',function(){
return
{
require:"theshield",
link:function(scope,element,attrs,ShieldController){
ShieldControlleraddAmbros();
}
};
})
directive('theshield',function(){
return
{
restrict:"E",
controller:"ShieldController",
//指定控制器
scope:{},
//清空该指令处的$scope
值
link:function(scope,element,attrs){
elementbind('mouseenter',function(){
//对于该指令所对应的元素绑定对应的事件
consolelog(scopeshieldNames);
});
}
};
});
</script>
</html>
希望本文所述对大家AngularJS程序设计有所帮助。
首先是html页面的编写：
<!doctype html><html ng-app="myModule">
<head>
<meta charset="utf-8">
<title>学生信息管理</title>
//需要用到的一些库，要加载的
<script src="bower_components/angular/angularjs"></script>
<script src="bower_components/ng-table/dist/ng-tablejs"></script>
<script src="bower_components/ng-table-export/ng-table-exportjs"></script>
<link rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" >
<script src="module/scripts/controllers/Formjs"></script>
</head>
<body>
<div ui-view></div>
<div ng-controller="FormController">
<h3>学生信息列表</h3>
<br>
<div>
搜索：<input type="text" ng-model="titleFilter" placeholder="输入关键字"> //加上<tr ng-repeat="student in students|filter:titleFilter">实现了表格内容的检索。
</div>
<br>
<table ng-table="tableParams" >
<tr ng-repeat="student in students|filter:titleFilter"> //遍历每一个对象
<td title="'Name'">
<span ng-if="!student$edit">{{studentName}}</span>
<div ng-if="student$edit"><input type="text" ng-model="studentName"></div>
</td>
<td title="'Id'">
<span ng-if="!student$edit">{{studentId}}</span>
<div ng-if="student$edit"><input type="text" ng-model="studentId"></div>
</td>
<td title="'Grade'">
<span ng-if="!student$edit">{{studentGrade}}</span>
<div ng-if="student$edit"><input type="text" ng-model="studentGrade"></div>
</td>
<td title="'Actions'" width="200">
<a ng-if="!student$edit" ng-click="student$edit=true">Edit</a>
<a ng-if="student$edit" ng-click="student$edit=false">Save</a>
<a ng-click="deleteStudent(obj)" ng-if="student$edit" >Delete</a>
<!-- <a ng-click="addStudent()" ng-if="student$edit" >Add</a> -->
</td>
</tr>
</table>
<div>
<input type="text" ng-model="newName" placeholder="input Name" required/>
<input type="text" ng-model="newId" placeholder="input Id" required/>
<input type="text" ng-model="newGrade" placeholder="input Grade" required/>
<input type="button" ng-click="addStudent()" value="Add" />
</div>
</div>
</body>
</html>接下来是js代码部分var myModule=angularmodule('myModule',['ngTable'])
controller('FormController',function($scope,ngTableParams,$sce){
$scopestudents=[
{Name:'小李',Id:'201401201',Grade:'计算机技术'},
{Name:'李磊',Id:'201401202',Grade:'计算机技术'},
{Name:'夏津',Id:'201401203',Grade:'计算机技术'},
{Name:'杭州',Id:'201401204',Grade:'计算机技术'}
];
$scopeaddStudent=function(){ //添加学生函数
$scopestudentspush({Name:$scopenewName,Id:$scopenewId,Grade:$scopenewGrade});
$scopenewName='';
$scopenewId='';
$scopenewGrade='';
};
$scopedeleteStudent=function(student){ //删除一行的内容
$scopestudentssplice($scopestudentsindexOf(student),1);
};
});
以上就是关于angularjs日期控件datepicker的date-change方法不起作用是为什么全部的内容，包括:angularjs日期控件datepicker的date-change方法不起作用是为什么、AngularJS中directive指令使用之事件绑定与指令交互用法示例、angularjs中怎么给表格点击添加数据等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）