前言

在指令中存在controller和link属性,对这二者心生有点疑问,于是找了资料学习下。

话题

首先我们来看看代码再来分析分析。

第一次尝试

页面:

    <custom-directive></custom-directive>

脚本:

angular
.module('app',[])
.directive('customDirective', customDirective); function customDirective() {
var directive = {
restrict: 'EA',
template: '<div>{{vm.test}}</div>',
link: function(){},
controller: directiveController,
controllerAs: 'vm'
}; return directive;
} function directiveController() {
var vm = this;
vm.test = "I'm from Controller";
}

【注】:基础还是非常重要,页面上为custom-directive,在脚本我写成customdirective时死都没出效果,改成customDirective才好使。

第二次尝试

页面自定义指令不变,我们就修改下脚本:

angular
.module('app',[])
.directive('customDirective', customDirective); function customDirective() {
var directive = {
restrict: 'EA',
template: '<div>{{test}}</div>',
link: directiveLink
}; return directive;
} function directiveLink(scope,elem,attr) {
scope.test = "I'm from Link";
}

到这里,我们不仅要开始思索:指令中的controller和link都可以实现同样的效果,那在指令中放这两个属性干嘛?我们的代码到底是放在controller还是link中?

我们首先来看看当二者一起使用时,呈现结果的顺序即在编译前后生成的顺序。

controller和link编译顺序

我们将脚本进行修改如下:

angular
.module('app',[])
.directive('customDirective', customDirective); function customDirective() {
var directive = {
restrict: 'EA',
template: '<div>xpy0928{{test}}</div>',
link: directiveLink,
controller:directiveController
}; return directive;
} function directiveController($scope){
$scope.test = " from contrller cnblogs";
} function directiveLink(scope,elem,attr) {
scope.test = scope.test + ",and from link cnblogs";
}

生成如下:

我们由此得出结论:编译之前执行控制器(controller),编译之后执行链接(link)。

但是我们还未从根本上解决问题,在controller和link应该放哪些代码?我们接下来再看一个例子:

var app = angular.module('app',[]);

app.directive('customDirective', customDirective);

function customDirective() {
var directive = {
restrict: 'EA',
template: '<child-directive><child-directive>',
controller: function($scope, $element) {
$element.find('span').text('hello cnblogs!');
}
}; return directive;
}
app.directive("childDirective",childDirective); function childDirective() {
var directive = {
restrict: 'EA',
template: '<h1>hello xpy0928</h1>',
replace: true,
link: function($scope, $element, attr) { $element.replaceWith(angular.element('<span>' + $element.text() + '</span>'));
}
}
return directive;
}

此时结果应该还是hello xpy0928还是hello cnblogs呢?我们看下结果:

我们再来将如上进行修改看看:

var app = angular.module('app',[]);

app.directive('customDirective', customDirective);

function customDirective() {
var directive = {
restrict: 'EA',
template: '<child-directive><child-directive>',
link: function(scope, el) {
el.find('span').text('hello cnblogs!');
}
}; return directive;
}
app.directive("childDirective",childDirective); function childDirective() {
var directive = {
restrict: 'EA',
template: '<h1>hello xpy0928</h1>',
replace: true,
link: function($scope, $element, attr) { $element.replaceWith(angular.element('<span>' + $element.text() + '</span>'));
}
}
return directive;
}

为什么会出现如此情况?因为在controller函数中此时所有child-directive指令中的link函数还未运行所以此时替换无效。

由此我们可以基本得出在controller和link中应该写什么代码的结论:

(1)在controller写业务逻辑(我们明白业务逻辑大部分是放在服务中),这里所说的业务逻辑乃是为呈现视图之前而准备的数据或者是与其他指令进行数据交互而暴露这个api。

(2)在link中主要操作DOM。

总结

指令乃是AngularJS中比较重要的一块,里面涉及到的东西也是非常之多,时不时的去往里面去灌东西,慢慢就会得心应手。

AngularJS之指令中controller与link(十二)的更多相关文章

  1. AngularJs的UI组件ui-Bootstrap分享(十二)——Rating

    Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...

  2. anagularJs指令的controller,link,compile有什么不同

    /directives.js增加exampleDirective phonecatDirectives.directive('exampleDirective', function() { retur ...

  3. 指令中 controller && controllerAs

    1, controller 他会暴露一个API,利用这个API可以在多个指令之间通过依赖注入进行通信. controller($scope, $element, $attrs, $tranclude) ...

  4. AngularJS的指令(Directive) compile和link的区别及使用示例

    如果我想实现这样一个功能,当一个input失去光标焦点时(blur),执行一些语句,比如当输入用户名后,向后台发ajax请求查询用户名是否已经存在,好有及时的页面相应. 输入 camnpr 失去焦点后 ...

  5. AngularJs ng-repeat指令中怎么实现含有自定义指令的动态html

    今天用angular写table的时候,遇到了一个问题.在ng-repeat中,含有动态的html,而这些html中含有自定义指令. 因为希望实现一个能够复用的table,所以定义了一个指令mySta ...

  6. talib 中文文档(十二):Pattern Recognition Functions K线模式识别,形态识别

    Pattern Recognition Functions K线模式识别,形态识别 CDL2CROWS - Two Crows 函数名:CDL2CROWS 名称:Two Crows 两只乌鸦 简介:三 ...

  7. Java内存管理-探索Java中字符串String(十二)

    做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 一.初识String类 首先JDK API的介绍: public final class String extends O ...

  8. 九十九、SAP中ALV事件之十二,给ALV的标题栏添加图片

    一.在OAER中找一个喜欢的图片,对象标识为“TRVPICTURE04” 二.来到我们的代码区,输入代码 三.效果如下 很完美

  9. 控制器controller与指令中的link、controller中变量作用域的关系

    angjualrjs中的作用域与原生js中的函数嵌套原理一致,都是存在作用域的继承.若在子控制器(同样包括在指令中的link或是controllerding中定义变量,此时指令中必须未使用scope独 ...

随机推荐

  1. 服务器使用FTP命令行 无法传送文件 卡在150 Opening data channel for file transfer

    猜测,是因FTP服务器采用了主动模式,在创建数据传输通道时,服务器会以一个随机的端口,连接回来. 临时解决方案: 因不知道请求回来使用的哪个段的端口,因此,暂时关闭了防火墙.即能正常传输文件了.

  2. js中字符串相关知识点总结

      有引号就是字符串类型 空格也算长度 字符串的length不可写 typeof 判断数据类型 var s="a bcadde你好" // alert(typeof s)      ...

  3. python中__init__问题

    python中安装目录中的Lib文件夹模块中的__init__.py文件(文件内容可以为空),用于标识此文件夹是一个模块 python编程中的__init__表示初始化

  4. [LintCode] Product of Array Except Self 除本身之外的数组之积

    Given an integers array A. Define B[i] = A[0] * ... * A[i-1] * A[i+1] * ... * A[n-1], calculate B WI ...

  5. 多个table切换 getElementsByClassName

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  6. MIME(多用途互联网邮件扩展类型)

    MIME对照表 百度百科 MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型.(百度百科).是设定某种扩展名的文件用一种应用程序来打开的方式 ...

  7. 温故而知新 css + html 超级牛逼的居中策略

    该方法甚至可以解决img内容居中的问题 套路:最外层div宽度为居中内容所占的宽度(通常是1170px),并且使其居中(margin:auto) 里层的div宽度为全屏(通常是1920px;)再mar ...

  8. ES6(四) --- 正则 Number Math

    想学vue了  重启ES6的学习之路 在ES5 中正则的构造器  RegExp  不支持第二个参数 ES6 做了调整   第二个参数表示正则表达式的修饰符(flag) var regex = new ...

  9. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  10. Sequence Project Showplan Operator 序列映射运算符

    Sequence Project Showplan Operator 序列映射运算符 序列映射运算符会从一个已经排序的集合里通过不停添加集合里的列执行计算. 运算符根据一个或多个列的值把输入集合分为多 ...