关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller。不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名。另外一个需知道的地方,指令命名时用驼峰规则,使用时用-分割各单词。如:定义myDirective,使用时 像这样:<my-directive>。
这里列出directive的合法命名:
- ng:bind
- ng-bind
- ng_bind
- x-ng-bind
- data-ng-bind
我是教师,在新建试题输入分数的时候应该只能输入数字才对,输入其他内容是不合法的,而且我希望这个分数是1~10之间的数字。能否只在输入框上加一个属性.我们定义一个叫做fractionNum的指令如下
app.directive('fractionNum',function(){
return {
link : function(scope, elements, attrs, controller){
elements[0].onkeyup = function(){
if(isNaN(this.value) || this.value<1 || this.value>10){
this.style.borderColor = 'red';
}
else{
this.style.borderColor = '';
}
};
}
};
});
link的值是一个函数,用来定义指令的行为。从传入的参数中可以获取到当前元素,我们便可以拿当前元素开刀了。我在此处监听当前元素的keyup事件,获取元素的值,如果不是1~10之间的数字,则把输入框的边框颜色变为红色。这下这个指令就可以工作了。定义好的指令就可以在模板中使用了,使用方法如下:
分数:<input type="text" ng-model="question.fraction" fraction-num /><br />
controller,link,compile有什么不同
//directives.js增加exampleDirective
phonecatDirectives.directive('exampleDirective', function() {
return {
restrict: 'E',
template: '<p>Hello {{number}}!</p>',
controller: function($scope, $element){
$scope.number = $scope.number + "22222 ";
},
//controllerAs:'myController',
link: function(scope, el, attr) {
scope.number = scope.number + "33333 ";
},
compile: function(element, attributes) {
return {
pre: function preLink(scope, element, attributes) {
scope.number = scope.number + "44444 ";
},
post: function postLink(scope, element, attributes) {
scope.number = scope.number + "55555 ";
}
};
}
}
});
//controller.js添加
dtControllers.controller('directive2',['$scope',
function($scope) {
$scope.number = '1111 ';
}
]);
//html
<body ng-app="phonecatApp">
<div ng-controller="directive2">
<example-directive></example-directive>
</div>
</body>
运行结果:
Hello 1111 22222 44444 55555 !
由结果可以看出来,controller先运行,compile后运行,link不运行(link就是compile中的postLink)。将上例中的compile注释掉运行结果:
Hello 1111 22222 33333 !
由结果可以看出来,controller先运行,link后运行,link和compile不兼容。compile改变dom,link事件的触发和绑定
分享到:
相关推荐
# AngularJS指令/控制器作为组件示例演示Web应用程序,用于显示 , , 集成需要本地Web服务器要正确运行Web应用程序,您需要具有本地Web服务器。 请参阅Git仓库的基本用法要获取母版的本地副本,请执行以下操作: ...
angularjs自定义指令directive,用做http地址校验和数字校验,仅供学习参考使用
某天一位前端大神问我:你知道angular指令中的controller,compile,link函数有什么不同?然后我就一脸懵逼了….于是决定深入的去探究下。 今天我们来一起了解一下它们有什么不同的地方: 先看一段示例代码 var ag =...
Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件,接下来通过本文给大家介绍AngularJS入门心得之directive和controller通信过程,对angularjs相关知识感兴趣的朋友一起学习吧
主要介绍了AngularJS中directive指令使用之事件绑定与指令交互用法,结合实例形式分析了directive指令在模板的使用,事件的绑定及元素、属性、控制器之间的交互相关操作技巧,需要的朋友可以参考下
本篇文章主要介绍了angularJS+requireJS实现controller及directive的按需加载示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下
Dropzone.js 的 AngularJS 指令Dropzone.js 是一个有用的 javascript 库,用于将内容上传到服务器,这个 repo 使用指令在 angularjs 上完整实现了这个库。 用法很简单,你只需要复制指令和配置对象(对象在控制器中...
本篇文章给大家介绍在angularjs中自定义一个有关表格的directive,涉及到angularjs directive相关知识,对本文感兴趣的朋友一起学习吧
下面小编就为大家带来一篇angularJS利用directive实现移动端自定义软键盘的示例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
angular-round-progress-directive, 一个用于循环进度小部件的AngularJS指令 Angular 循环进度指令这里指令允许你使用一个循环的进程,感谢一个AngularJS指令。要求无任何相关性这里指令只需要可以显示画布的网页...
angularjs-指令-研讨会 JSSummit 的简单一步一步的 AngularJS 指令教程
今天小编就为大家分享一篇angularJS自定义directive之带参方法传递详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
今天学习angularjs自定义指令Directive。 Directive是一个非常棒的功能。可以实现我们自义的的功能方法。 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号”Admin”。 在网页上放一个文本框和一个铵钮:...
本文实例讲述了Angularjs使用directive自定义指令实现attribute继承的方法。分享给大家供大家参考,具体如下: 一、Html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>...
CanvasJS-AngularJS指令 AngularJS的CanvasJS指令 需要库 安装 将chart.js文件放入您的项目目录 确保此文件包含在HTML标头中 编辑文件chart.js并将angular.module('your-module-here')更改为模块的名称 如下所述调用...
暂时有http的校验 和 纯数字的校验,代码共享