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=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:

(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);
}());