《中级前端5.5》AngularJS Directive 的使用——自定义html组件,与controller会话,element

核心内容： 1.使用 Directive 自定义 HTML 组件； 2.Directive 与 Controller 之间的会话； 3.使用 Angular.element 操作 Dom； 

《AngularJS》5个实例详解Directive（指令）机制 http://damoqiongqiu.iteye.com/blog/1917971

 

使用 Directive 自定义 HTML 组件

 

html:

<div ng-app="app">
    <div class="hello"></div>
    <div shuxing class="yangshi"></div>
</div>

js:

var app = angular.module('app', []);

app.directive('hello', function(){
    return {
        restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment
        template: '<div>Hello AngularJS</div>',
        replace: true,    //替换掉我们自定义的directive名称
        link: function() {
        }
    };
});

app.directive('shuxing', function(){
    // Runs during compile
    return {
        restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
        link: function() {
            alert("我是属性");
        }
    };
});

app.directive('yangshi', function(){
    // Runs during compile
    return {
        restrict: 'C', // E = Element, A = Attribute, C = Class, M = Comment
        link: function() {
            alert("我在样式");
        }
    };
});

 

可以看到，<hello>这个东东已经被<div>Hello AngularJS</div>这个标签替换掉

指令声明方式选项：

 

 

Directive 与 Controller 之间的会话

 

directive中通过属性和参数调用controller:

<div ng-app="app">
    <div ng-controller="AppCtrl">
        <div enter="delData()">I'm here</div>
    </div>
</div>    

<script>
var app = angular.module('app', []);

app.controller('AppCtrl', function($scope){
    $scope.loadMoreData = function(){
        alert("正在加载数据...");
    }
    $scope.delData = function(){
        alert("正在删除数据...");
    }
})

app.directive('enter', function(){
        //directive中的restrict默认就是'A'，即属性
        //link可以直接返回
    return function(scope, element, attrs){
        element.bind('mouseenter', function(){
            // $scope.loadMoreData();    //这样和div中直接ng-mouseenter="loadMoreData()"是一样的，没有意义
            // scope.$apply("loadMoreData()");
            scope.$apply(attrs.enter);    //通过div中的属性实现调用
        })
    }
})
</script>

 

directive之间通过require获得controller进行数据交流：

<div ng-app="app">
    <food apple orange banana>所有食物</food>
    <food apple orange>所有食物</food>
</div>

<script>
var app = angular.module('app', []);

app.directive('food', function(){
    return {
        restrict: 'E',
        scope : {},    //每次初始化directive,都清空scope
        controller: function($scope){
            $scope.foods = [];
            this.addApple = function(){
                $scope.foods.push('apple');
            }
            this.addOrange = function(){
                $scope.foods.push('orange');
            }
            this.addBanana = function(){
                $scope.foods.push('banana');
            }
        },
        link: function(scope, element, attrs) {    
            element.bind('mouseenter', function(){
                console.log(scope.foods);
            });
        }
    }
})
app.directive('apple', function(){
    return {
        require: 'food',    //用require获得food中的controller
        link: function(scope, iElm, iAttrs, foodCtrl) {    
            foodCtrl.addApple();    
        }
    }
})
app.directive('orange', function(){
    return {
        require: 'food',
        link: function(scope, iElm, iAttrs, foodCtrl) {    
            foodCtrl.addOrange();    
        }
    }
})
app.directive('banana', function(){
    return {
        require: 'food',
        link: function(scope, iElm, iAttrs, foodCtrl) {    
            foodCtrl.addBanana();    
        }
    }
})
</script>

访问页面：

 

关于directive里的link和controller区别？
1、执行顺序：先controller后link
2、何时使用controller：一般场景下都不想要使用controller，只需要把逻辑写在link中就可以了；用controller的场景就是该指令（假设为a）会被其他指令（假设为b）require的时候，这样就会在b指令的link函数中传入这个controller（如果require多个的话，传入的是一个数组，数组中存放的是每一个require的指令对应的controller），目的很显然是为了指令间进行交流的。

 

 

Angular.element 的用法

先看一段代码：

<div enter leave>我在这里</div>

<script>

var app = angular.module('app', []);

app.directive('enter', function(){
    return function(scope, element, attrs){
        //console.log(element);    有很多类jQuery的方法可以使用
        element.bind('mouseenter', function(){
            element.addClass('alert-box');
        })
    }
});
app.directive('leave', function(){
    return function(scope, element, attrs){
        element.bind('mouseleave', function(){
            element.removeClass('alert-box');
        })
    }
});

</script>

效果：

1.初始状态：

2.鼠标移入状态：

3.鼠标移出状态：

 

 

可以看到，自定义好directive指令后，当我们在html中使用的时候，自动就可以执行link中的回调方法。

 

而且link中的参数都使都非常好用：

element使得link中可以直接操作自定义组件的DOM；

attrs可以获得组件中的属性值；（属性可以是调用controller中的某个方法，使用非常灵活）

当directive中require其他directive的时候，还可以获得controller引用，可以直接操作其他directive中的controller，实现directive间的通信。

 

 

下面我们来看一个稍微复杂点的element使用方法：

<hello></hello>

<script>

app.directive('hello', function(){
    return {
        restrict: 'E',
        template: '<div><input class="input" ng-model="txt"><div>{{txt}}</div></div>',
        link: function(scope, element){
            scope.$watch('txt', function(newValue) {
                if(newValue === 'error'){
                    element.addClass('alert-box alert');
                }
            });
        }
    }
})

</script>

可以看到，element的使用方法非常灵活。