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比 ...
随机推荐
- 只具备内网的服务器通过yum安装软件
1.在维护过程中,需要统一安装一些软件,可能有的机器只具有内网,有的机器具备外网,可以直接从yum安装,怎么办呢?答:在具备外网的机器上启用yum缓存,这样安装软件的时候本地也缓存了软件安装包,怎样修 ...
- Win下常用命令大全
定时关机命令win+R输入 Shutdown -s //后面不加时间参数,默认的是倒计时30秒后关机Shutdown -s -t 0 //立刻关机shutdown -s -t 100 //100s后关 ...
- percona-toolkit中在线ddl
percona-toolkit中在线ddl percona-toolkit工具提供了一组用于mysql操作的工具,比如主从复制,在线更改mysql表ddl等 一.安装1.安装perl(略)2.BI&a ...
- linux的sysctl基本配置
# Controls the use of TCP syncookiesnet.ipv4.tcp_syncookies = 1 # me write paramnet.ipv4.tcp_timesta ...
- ios上position:fixed失效问题
手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了 固定定位的底部导航在ios上被弹出去 此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="ma ...
- 从Swift3的标准库协议看面向协议编程(一)
Swift中,大量内置类如Dictionary,Array,Range,String都使用了协议 先看看Hashable 哈希表是一种基础的数据结构.,Swift中字典具有以下特点:字典由两种范型类型 ...
- (copy) Top Ten Reasons not to use the C shell
http://www.grymoire.com/Unix/CshTop10.txt ========================================================== ...
- Android下安装应用不成功解决
在手机上安装应用程序不成功,可以尝试把手机连接电脑,然后使用adb进行安装,adb安装命令: adb install Android_65632.apk 当出现: success!就表示成功,但当不成 ...
- sqlserver日志的备份与还原
----------完整备份与还原---------- --完整备份数据库--backup database studb to disk='e:\stu.bak'back ...
- 【转】SQL Server中的事务与锁
SQL Server中的事务与锁 了解事务和锁 事务:保持逻辑数据一致性与可恢复性,必不可少的利器. 锁:多用户访问同一数据库资源时,对访问的先后次序权限管理的一种机制,没有他事务或许将会一塌糊涂 ...