49.AngularJs 指令directive之controller，link，compile
转自：https://www.cnblogs.com/best/tag/Angular/
关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用[命名空间-指令名称]这样的方式，像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 />
- //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事件的触发和绑定
49.AngularJs 指令directive之controller，link，compile的更多相关文章
- 【转载】AngularJs 指令directive之controller，link，compile
关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller.不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名.另外一个需知道的 ...
- AngularJs 指令 directive中link，controller 的区别
其实严格来讲,link和controller是完全不同的概念,这里讲区别有点牵强. angular指令中,带有link和controller两个函数,很多人在写指令的时候不知道是写在link里 还是c ...
- AngularJS 指令生命周期 complie link
AnguarJS指令从解析到生效一共会经历Inject.Compile.Controller加载.Pre-link.Post-link这几个主要阶段. 一.AngularJS指令执行过程 1.加载An ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- AngularJS自定义Directive与controller的交互
有时候,自定义的Directive中需要调用controller中的方法,即Directive与controller有一定的耦合度. 比如有如下的一个controller: app.controlle ...
- angularJs 指令调用父controller某个方法
1.父级controller:例如有个 init() 方法; 父级与子级的通信数据是$scope.controlFlag={}; 那么可以在父级controller里这样写:$scope.contro ...
- AngularJs 指令directive之require
controller的用法分为两种情形,一种是require自定义的controller,由于自定义controller中的属性方法都由自己编 写,使用起来比较简单:另一种方法则是require An ...
- Angularjs之directive指令学习笔记（二）
1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoq ...
- AngularJS的指令(Directive) compile和link的区别及使用示例
如果我想实现这样一个功能,当一个input失去光标焦点时(blur),执行一些语句,比如当输入用户名后,向后台发ajax请求查询用户名是否已经存在,好有及时的页面相应. 输入 camnpr 失去焦点后 ...
随机推荐
- WinServer-IIS-请求筛选
这个实在太多了,可以比较好的控制网站的访问 来自为知笔记(Wiz)
- angular-Scope
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 当你在 Ang ...
- hiho模拟面试题2 补提交卡 （贪心，枚举）
题目: 时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描写叙述 小Ho给自己定了一个雄伟的目标:连续100天每天坚持在hihoCoder上提交一个程序.100天过去了.小Ho查 ...
- ADO.NET (二)—— ADO和ADO .NET对照
ADO.NET (二)-- ADO和ADO .NET对照 我们知道ADO.NET的两大核心组件各自是Data Provider和DataSet.假设说 DataSet是ADO.NET的心 ...
- WAP 图片 lazyload
原理是根据屏幕上的坐标找到需要做 lazyload 的区域 1,先监听 scroll 事件 ,scrolling_lt window.addEventListener('scroll', functi ...
- UVALive 4192/HDU 2959 Close Enough Computations 数学
Close Enough Computations Problem Description The nutritional food label has become ubiquitous. A sa ...
- iOS7实现带文本输入框的UIAlertView及获取TextField文本内容
if (customAlertView==nil) { customAlertView = [[UIAlertView alloc] initWithTitle:@"自定义服务器地址&quo ...
- m_Orchestrate learning system---二十、如何写代码不容易犯错
m_Orchestrate learning system---二十.如何写代码不容易犯错 一.总结 一句话总结:能排序多排序 这次查错的启示: 1.代码数据更规整:要是取出的数据排序的话可以减少很多 ...
- 关于javascript 与iOS交互的简单使用
关于导入 JavaScriptCore 这个就不说了 js交互我们首先用到webView与webView的代理 基本上是很简单,,不过后台10分的坑 以下是代码 在webView的加载完成里面 fun ...
- css3 字体、2D转换、3D转换
学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...