anagularJs指令的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 ";
},
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注释掉
// 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 ";
// }
// };
// }
运行结果：
Hello 1111 22222 33333 !
由结果可以看出来，controller先运行，link后运行，link和compile不兼容。
<div ng-controller="ctrl1">
<superman weight length speed>superman</superman>
<superman weight >weight</superman>
</div> <script type="text/javascript">
angular.module('myMoudle',[])
.controller('ctrl1', ['$scope', function($scope){ }])
.directive("superman", function(){
return {
restrict : "E",
scope : {},
controller : function($scope){
$scope.abilities = []; this.addWeight = function(){
$scope.abilities.push("Weight");
} this.addSpeed = function(){
$scope.abilities.push("Speed");
} this.addLength = function(){
$scope.abilities.push("Length");
}
},
link : function(scope, element){
element.bind("mouseenter", function(){
console.log(scope.abilities);
})
}
}
})
.directive("weight", function(){
return {
restrict : "A",
require : "superman",
link : function(scope, element, attrs, superman){
superman.addWeight();
}
}
})
.directive("speed", function(){
return {
restrict : "A",
require : "superman",
link : function(scope, element, attrs, superman){
superman.addWeight();
}
}
})
.directive("length", function(){
return {
restrict : "A",
require : "superman",
link : function(scope, element, attrs, superman){
superman.addLength();
}
}
}) </script>
controller : 指令的controller中放一些公共部分，通过require让多个指令共享controller中的数据。
require : ^ 允许从父类开始查找 require:"^superman"; ? 如果找不到不抛出异常。
scope : {} 创建独立作用域，没有原型继承。= or =attr “Isolate”作用域的属性与父作用域的属性进行双向绑定，任何一方的修改均影响到对方，这是最常用的方式；@ or @attr “Isolate”作用域的属性与父作用域的属性进行单向绑定，即“Isolate”作用域只能读取父作用域的值，并且该值永远的String类型; & or &attr “Isolate”作用域把父作用域的属性包装成一个函数，从而以函数的方式读写父作用域的属性，包装方法是$parse;
link : 主要做一些dom操作;
link和controller的相同点在于里面都可包含数据源和操作。不同点在于：link能控制渲染html元素的过程，而controller不能，controller的模版写死的，仅侧重于提供数据源和操作。
使用link函数的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=, 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:
(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);
}());
anagularJs指令的controller，link，compile有什么不同的更多相关文章
- angularjs link compile与controller的区别详解，了解angular生命周期
壹 ❀ 引 我在 angularjs 一篇文章看懂自定义指令directive 一文中简单提及了自定义指令中的link链接函数与compile编译函数,并说到两者具有互斥特性,即同时存在link与c ...
- AngularJS之指令中controller与link（十二）
前言 在指令中存在controller和link属性,对这二者心生有点疑问,于是找了资料学习下. 话题 首先我们来看看代码再来分析分析. 第一次尝试 页面: <custom-directive& ...
- 控制器controller与指令中的link、controller中变量作用域的关系
angjualrjs中的作用域与原生js中的函数嵌套原理一致,都是存在作用域的继承.若在子控制器(同样包括在指令中的link或是controllerding中定义变量,此时指令中必须未使用scope独 ...
- AngularJs 指令 directive中link，controller 的区别
其实严格来讲,link和controller是完全不同的概念,这里讲区别有点牵强. angular指令中,带有link和controller两个函数,很多人在写指令的时候不知道是写在link里 还是c ...
- directive(指令里的)的compile,pre-link,post-link,link,transclude
The nitty-gritty of compile and link functions inside AngularJS directives The nitty-gritty of comp ...
- Angular1.x directive(指令里的)的compile,pre-link,post-link,link,transclude
The nitty-gritty of compile and link functions inside AngularJS directives The nitty-gritty of comp ...
- 指令中 controller && controllerAs
1, controller 他会暴露一个API,利用这个API可以在多个指令之间通过依赖注入进行通信. controller($scope, $element, $attrs, $tranclude) ...
- 了解 : angular controller link ng-init 顺序
controller 会先跑,接着是view 里的ng-init,最后是link (指令里的). 所有在指令里如果用link去拿$attr,会有拿不到ng-init想setup的值
- AngularJS指令嵌套时link函数执行顺序的问题
今天研究指令嵌套时,发现子指令的link函数先于父指令的link函数执行. 这样和预想的顺序不一样. 也就是说,如果子指令的某个scope变量依赖于父指令传来的参数时,可能一直是undefinded比 ...
随机推荐
- Learn ZYNC (6)
最近在关注的问题是怎么样从ps端丢数据到ram, 然后用ip核进行处理后再输送到ram,ps端可以读取. 参考文献:[OpenHW参赛手记]AXI-Stream接口开发详细流程 首先按照作者的探索思路 ...
- BSBuDeJie_03
一 快速登录 1 改变状态栏的style - (UIStatusBarStyle)preferredStatusBarStyle { return UIStatusBarStyleLightConte ...
- convert与int.parse int
1,convert :适合将object 转换 int:简单数据转换 int.parse:将string类型转换为int 2,convert:对于空值返回0 不会报异常 int.parse:将会抛出异 ...
- Windows7 IE11 F12控制台DOC资源管理器报错的问题解决方法
------------------ Diagnostic: Exception in window.onload: Error: An error has ocurredJSPlugin.3005 ...
- Win7 下安装VirtualBox 没有Ubuntu 64bit 选项问题
参考: win7安装virtualbox遇到的问题 基于VirtualBox虚拟机安装Ubuntu图文教程 问题 在安装VirtualBox之后,选择虚拟机进行安装的时候发现没有Ubuntu 64bi ...
- ios调用百度地图定位遇到的奇葩问题
app项目过程中需要用到百度地图,然后网上可以查资料看官网文档,最后弄了好几天还是不行,找了各位前辈帮忙虽然解决了,但是把代码拷贝到我的项目时又无法定位了,最后查看了下原因是info配置出了问题,不是 ...
- Universal Link 笔记
如何实现Universal Link? 简单地说三步,1.把一个配置文件放在指定服务器根目录 2.在Xcode中设置AssociateDomain 3.安装app时,会根据Xcode中设置的Assoc ...
- Python 开平方
#!/user/bin/python3#files :using_sys.pyf = open("filename.txt","r+")num = f.read ...
- css 居中问题
水平居中有text-align:center 和 margin:0 auto,前者是针对父元素进行设置而后者则是对子元素.margin:0 auto; 这里实现的前提是子元素没有float 浮动起来, ...
- [原创]如何在Parcelable中使用泛型
[原创]如何在Parcelable中使用泛型 实体类在实现Parcelable接口时,除了要实现它的几个方法之外,还另外要定义一个静态常量CREATOR,如下例所示: public static cl ...