AngularJS学习笔记（二）指令系统

AngularJS指令系统

最简单的例子：

<div ng-app="myModule">
    <hello></hello>
</div>

<script>
    var myModule = angular.module('myModule',[]);
    myModule.directive("hello",function(){
        return{
            restrict:'E',
            template:'<div>Hi everyone!</div>',
            repalce:true
        }
    })
</script>

我们通过指令自定义了一个<hello>元素，页面效果为：

image.png

打开谷歌浏览器开发者模式，看到<hello></hello>里面被替换成为：

image.png

restrict

匹配模式，有四种模式：

• A：属性
• E:元素
• M：注释
• C：css样式类
  一般来时模式很少使用。
  AEC模式的使用方法示例：

<div ng-app="myModule">
    <hello></hello><!-- 元素 E模式 -->
    <div hello></div><!-- 属性 A属性模式 -->
    <div class="hello"></div><!-- class样式类 C模式 -->
</div>

<script>
    var myModule = angular.module('myModule',[]);
    myModule.directive("hello",function(){
        return{
            restrict:'AEC',
            template:'<div>Hi everyone!</div>',
            repalce:true
        }
    })
</script>

网页效果：

image.png

默认使用A模式。

哪种情况下使用哪种模式？

• 当需要创建带有自己模板的指令时，使用E模式
• 当需要为已有的HTML标签增加功能时，使用A模式

template

模板
template:'<div>Hi everyone!</div>'是我们最终在页面上呈现出来的内容。如果内容较多时，我们可以把模板单独写在一个html中，再用templateUrl引入，写法为：templateUrl:'hello.html'

transclude

变换
当我们用指令自定义一个标签时，又在标签里面嵌套了一段内容时，我们自定义的标签内容往往会把原有内容替换，我们可以使用transclude来避免这样的情况出现。

<div ng-app="myModule">
    <hello>
        <div>指令内嵌套的内容</div>
    </hello>
</div>
<script>
    var myModule = angular.module('myModule',[]);
    myModule.directive("hello",function(){
        return{
            restrict:'E',
            template:'<div>Hi everyone!<div ng-transclude></div></div>',
            transclude:true
        }
    })
</script>

页面效果：

image.png

replace

相反的，如果我们想把标签里面的所有内容全部替换掉，我们可以设置replace=true。

<div ng-app="myModule">
    <hello>
        <div>指令内嵌套的内容</div>
    </hello>
</div>
<script>
    var myModule = angular.module('myModule',[]);
    myModule.directive("hello",function(){
        return{
            restrict:'E',
            template:'<div>Hi everyone!</div>',
            replace:true
        }
    })
</script>

效果：

image.png

link

用link函数创建可操作DOM的指令。

代码示例：

<div ng-app="myModule">
    <div ng-controller = "MyCtrl">
        <loader>加载数据</loader>
    </div>
</div>

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

    myModule.controller('MyCtrl',['$scope',function($scope){
        $scope.loadData = function(){
            console.log("加载数据中……");
        }
    }]);

    myModule.directive("loader",function(){
        return{
            restrict:'AE',
            link:function(scope,element,attr){
                element.bind("click",function(){//绑定点击事件
                    scope.loadData();//控制器中定义的方法
                })
            }
        }
    })
</script>

可见，通过link函数我们给元素绑定了一个点击事件。
效果：

image.png

点击之后，控制台中显示：

image.png