/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有什么不同的更多相关文章

  1. angularjs link compile与controller的区别详解,了解angular生命周期

     壹 ❀ 引 我在 angularjs 一篇文章看懂自定义指令directive 一文中简单提及了自定义指令中的link链接函数与compile编译函数,并说到两者具有互斥特性,即同时存在link与c ...

  2. AngularJS之指令中controller与link(十二)

    前言 在指令中存在controller和link属性,对这二者心生有点疑问,于是找了资料学习下. 话题 首先我们来看看代码再来分析分析. 第一次尝试 页面: <custom-directive& ...

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

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

  4. AngularJs 指令 directive中link,controller 的区别

    其实严格来讲,link和controller是完全不同的概念,这里讲区别有点牵强. angular指令中,带有link和controller两个函数,很多人在写指令的时候不知道是写在link里 还是c ...

  5. directive(指令里的)的compile,pre-link,post-link,link,transclude

    The nitty-gritty of compile and link functions inside AngularJS directives  The nitty-gritty of comp ...

  6. 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 ...

  7. 指令中 controller && controllerAs

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

  8. 了解 : angular controller link ng-init 顺序

    controller 会先跑,接着是view 里的ng-init,最后是link (指令里的). 所有在指令里如果用link去拿$attr,会有拿不到ng-init想setup的值

  9. AngularJS指令嵌套时link函数执行顺序的问题

    今天研究指令嵌套时,发现子指令的link函数先于父指令的link函数执行. 这样和预想的顺序不一样. 也就是说,如果子指令的某个scope变量依赖于父指令传来的参数时,可能一直是undefinded比 ...

随机推荐

  1. 10.this关键字

    ①在类的方法定义中使用的this关键字代表使用该方法的对 象的引用 ②当必须指出当前使用方法的对象是谁时要使用this ③有时使用this处理方法中成员变量和参数重名的情况 ④this可以看做是一个变 ...

  2. Swift微博编写感

    首先Swift是苹果2014年力推的编程语言.可见发展趋势  在此提供    

  3. mysql延迟查询, 覆盖索引使用例子

    引用自 'mysql高性能' 5.3.6章节 不能使用覆盖索引的情况 :  解决办法 : 

  4. Unity Aspect

    Unity封装的东西太多,所以在很多情况下回忽略这些基本的事情.游戏窗口的中Aspect是通过Game窗口中进行选择,但对于相机的Aspect Unity并没有暴露接口在设置界面中,至少在编辑器下进行 ...

  5. Tomcat(多版本)安装注意!

    ♣电脑安装多个版本的tomcat和切换(解压版的apache-tomcat   -5.5.0/   -6.0.45/  -7.0.70  三个版本) ♣tomcat配置环境变量 ♣tomcat5.5. ...

  6. Ruby-随机数

    --随机0-1 rand --随机一个范围 rand(1..100)

  7. 【xcode】qt程序不通过qmake,运行找不到动态库的坑

    现象:试图在一个已有项目里增加qt的代码,因此手动加入相关framework(未通过qmake生成工程),编译连接都通过,但是运行时崩溃,提示错误: dyld: Library not loaded ...

  8. Codeforces554B:Ohana Cleans Up

    B. Ohana Cleans Up Time Limit: 2000ms Memory Limit: 262144KB 64-bit integer IO format: %I64d      Ja ...

  9. Thymeleaf 与 Javascript

    在 javascript 代码中使用 Thymeleaf 模板引擎: <script th:inline="javascript"> $("#content& ...

  10. Java this关键字

    this 关键字有三个应用: 1.this调用本类中的属性,也就是类中的成员变量 2.this调用本类中的其他方法 3.this调用本类中的其他构造方法,调用时要放在构造方法的首行 来看下面这段代码: ...