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比 ...
随机推荐
- css3动画效果
css3中的transform中有旋转,放缩,倾斜,平移的功能,分别对应的属性是:rotate,scale,skew,translate 旋转:(rotate) [css] view plaincop ...
- JsonTest
以前用MVC写网站时并不用考虑Json的转换,MVC已经提供了现成的方法. 现在没有用MVC,我就在考虑如何自己转换Json,想来想去自己写还是不够完美,于是尝试了一些其他人写的方法,尝试过微软提供的 ...
- 【最简单IOC容器实现】实现一个最简单的IOC容器
前面DebugLZQ的两篇博文: 浅谈IOC--说清楚IOC是什么 IoC Container Benchmark - Performance comparison 在浅谈IOC--说清楚IOC是什么 ...
- Graph cuts图论分割
Graph cuts是一种十分有用和流行的能量优化算法,在计算机视觉领域普遍应用于前背景分割(Image segmentation).立体视觉(stereo vision).抠图(Image matt ...
- 【偶像大师 白金星光】的【Variable Tone】技术大公开！偶像从哪里看都那么可爱，VA小组谈制作方针
http://game.watch.impress.co.jp/docs/news/1016369.html 自从街机版的运营依赖,今年迎来了[偶像大师]系列的11周年.在CEDEC ...
- PHP 获取当天 凌晨 时间戳常用代码
echo strtotime(date('Y-m-d')); 获取明天凌晨的时间戳代码:echo strtotime(date('Y-m-d',strtotime('+1 day'))); 附上测试代 ...
- php 读取文件
<?php /** *@param string $ip *@return string ip对应的地区 */ function getLocation($ip) { $ip_file_path ...
- VS2012 提示未找到与约束 ContractName 匹配的倒出
问题描述: 今天由于开发需要,我安装了一下 Vs 2015 按照之后 打开原来的项目 vs2012 打开,点击类文件提示错误 未找到与约束 ContractName 匹配的倒出 解决办法: 1 去微 ...
- MFC操作excel
环境:VS2013+office2007 头文件: #pragma once #ifndef __MYEXCEL_H_ #define __MYEXCEL_H_ #include "CApp ...
- 快速学习html、css的经典笔记
HTML语言剖析 Html简介-目录 全写: HyperText Mark-up Language 译名: 超文本标识语言 简释:一种为普通文件中某些字句加上标示的语言,其目的在于运用标签(tag ...