AngularJS自定义Directive中link和controller的区别
在AngularJS中,自定义Directive过程中,有时用link和controller都能实现相同的功能。那么,两者有什么区别呢?
使用link函数的Directive
页面大致是:
<button id="addItem">Add Item</button>
<without-Controller datasource="customers" add="addCustomer"></without-Controller>
Directive方面:
(function(){
var withoutController = function(){
var tempalte = '<button id="addItem">Add Item</button><div></div>'; var link = function(scope, element, attrs){ //从scope中的datasource拿到数据源
var items = angular.copy(scope.datasource),
button = angular.element(document.getElementById('addItem')); button.on('click', addItem); render(); function addItem(){
var name = 'new customer'; //执行Directive中传入的方法,带参数
scope.$apply(function(){
scope.add()(name);
}); items.push({
name: name
}); render();
} function render(){
var html = '<ul>';
for(var i=0, len=item.length;i<len;i++){
html += '<li>' + items[i].name + '</li>'
}
html += '</ul>'; element.find('div').html(html);
}
}; reutrn {
restrict: 'EA',
scope: {
datasource: '=',
add: '&'
},
link: link,
template: template
}
}; angular.module('directiveModule')
.directive('withoutController', withoutController);
}());
使用controller的Directive
页面大致是:
<with-controller datasource="customers" add="addCustomer"></with-controller>
Directive方面:
(function(){
var withController = function(){
var template = '<button ng-click="addItem()">Add Item</button><ul>' + '<li ng-repeat="item in items">{{::item.name}}</li></ul>', controller = ['$scope', function($scope){
init(); function init(){
$scope.items = angular.copy($scope.datasource);
} $scope.addItem = function(){
var name = "customer new";
$scope.add()(name);
$scope.items.push({
name: name
});
}
}]; return {
restrict: 'EA',
scope: {
datasource: '=',
add:'&'
},
controller: controller,
template:template
}
}; angular.module('directiveModule')
.direcitve('withController', withController);
}());
可见,link和controller的相同点在于里面都可包含数据源和操作。不同点在于:link能控制渲染html元素的过程,而controller不能,controller的模版写死的,仅侧重于提供数据源和操作。
如果使用controllerAs,Directive大致是:
(function(){
var withController = function(){
var template = '<button ng-click="vm.addItem()">Add Item</button><ul>' + '<li ng-repeat="item in vm.items">{{::item.name}}</li></ul>', controller = function(){
var vm = this; init(); function init(){
vm.items = angular.copy($scope.datasource);
} vm.addItem = function(){
var name = "customer new";
vm.add()(name);
vm.items.push({
name: name
});
}
} return {
restrict: 'EA',
scope: {
datasource: '=',
add:'&'
},
controller: controller,
controllerAs: 'vm',
bindToController:true,
template:template
}
}; angular.module('directiveModule')
.direcitve('withController', withController);
}());
其中,controllerAs和bindToController属性成对出现。
AngularJS自定义Directive中link和controller的区别的更多相关文章
- AngularJs 指令 directive中link,controller 的区别
其实严格来讲,link和controller是完全不同的概念,这里讲区别有点牵强. angular指令中,带有link和controller两个函数,很多人在写指令的时候不知道是写在link里 还是c ...
- AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?
最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...
- AngularJS自定义Directive与controller的交互
有时候,自定义的Directive中需要调用controller中的方法,即Directive与controller有一定的耦合度. 比如有如下的一个controller: app.controlle ...
- AngularJS自定义Directive不一定返回对象
AngularJS中,当需要自定义Directive时,通常返回一个对象,就像如下的写法: angular.module('modulename') .directive('myDirective', ...
- AngularJS自定义Directive初体验
通常我们这样定义个module并随之定义一个controller. var app = angular.module('myApp', []); app.controller('CustomersCo ...
- AngularJS自定义Directive
(编辑完这篇之后,发现本篇内容应该属于AngularJS的进阶,内容有点多,有几个例子偷懒直接用了官方的Demo稍加了一些注释,敬请见谅). 前面一篇介绍了各种常用的AngularJS内建的Direc ...
- [AngularJS] Reusable directive, require from parent controller
Glorious Directives for Our Navigation NoteWrangler navigation has now been broken into two parts: t ...
- CSS中link与import的区别
一.import的用法 1,在html文件中 <style type="text/css"> @import url(http://www.dreamdu.com/st ...
- SpringBoot 中 @RestController 和 @Controller 的区别
1 - 在springboot中,@RestController 相当于 @Controller + @ResponseBody;2 - 即在Controller类中,若想返回jsp或html页面,则 ...
随机推荐
- Intellij IDEA14 搜索框及控制台乱码解决
搜索ctrl+F及ctrl+H的搜索框.调试的时候控制台.导入module都显示为为中文乱码 如下: 解决方案: File->Setting->IDE Settings->Appea ...
- 使用ts-loader与webpack编译typescripts出现Module build failed: TypeError: Cannot read property 'afterCompile' of undefined
解决方法 将ts-loader从4.0降低到3.1.1解决问题.是由于webpack和ts-loader版本不兼容造成的.
- 微信HTML5页面设计建议
一个HTML5页面从提出到完成上线的流程:> 1.需求方.设计人员.H5实现人员三方共同讨论实现方案 2.设计人员出设计图 3.H5人员按设计图出H5页面 4.需求方评估已实现的H5页面后给 ...
- [转]CentOS7 下安装svn
1. 安装 centos(我这里使用的是CentOS7)下yum命令即可方便的完成安装 $ sudo yum install subversion 测试安装是否成功: $ svnserve --ver ...
- ubuntu 查看进程信息
查看进程信息 ps ps -aux 查看所有进程,每行一个程序 top 显示当前运行程序 kill 98 (98为PID号,) kill -9 98 (强制杀死98) ps -e Linux如何查看端 ...
- Chakra TypedArray代码实现笔记
ArrayBuffer.cpp阅读 对象继承关系 JavascriptArrayBuffer: ArrayBuffer: ArrayBufferBase: DynamicObject: Recycla ...
- 【C++ Primer 第16章】2. 模板实参推断
模板实参推断:对于函数模板,编译器利用调用中的函数实参来确定模板参数,从函数实参来确定模板参数的过程被称为模板实参推断. 类型转换与模板类型参数 与往常一样,顶层const无论在形参中还是在是实参中, ...
- Java 和 C++ 的部分区别
1. Java是解释型语言,所谓的解释型语言,就是源码会先经过一次编译,成为中间码,中间码再被解释器解释成机器码.对于Java而言,中间码就是字节码(.class),而解释器在JVM中内置了. 2. ...
- Redis与Zookeeper实现分布式锁的区别
Redis实现分布式锁 1.根据lockKey区进行setnx(set not exist,如果key值为空,则正常设置,返回1,否则不会进行设置并返回0)操作,如果设置成功,表示已经获得锁,否则并没 ...
- Python subprocess方法
import subprocess #subprocess.call("df -h",shell=True,stdout=subprocess.PIPE)#打印到视图,但是不能保存 ...