AngularJS中Directive（指令）机制详解

最新推荐文章于 2024-05-13 14:54:25 发布

泡沫9水灵灵

最新推荐文章于 2024-05-13 14:54:25 发布

阅读量1.9k

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/u010147288/article/details/51613984

版权

AngularJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

AngularJS 通过被称为指令的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。
指令的作用：实现语义化标签。
使用AngularJS的directive（指令）机制，我们可以实现这样的东西：

<body ng-app="myApp">

<directive></directive>
<script src="js/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.directive("directive", function() {
    return {
        restrict:'E',
        template : "<h1>自定义指令!</h1>",
        replace:true
    };
});
</script>

</body>

结果是：
这里写图片描述
html标签结构如下：

可以看到浏览器可以解析自定义的directive指定，将自定义指令替换成template中的内容。这就是replace:true的作用，至于restrict:’E’这个配置项的含义，请看下表：

你可以限制你的指令只能通过特定的方式来调用。通过添加 restrict 属性,并设置只值为 “E”, 来设置指令只能通过元素名的方式来调用。
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
transclude（变换）：

<body ng-app="myApp">
<directive><br>
    <span>这是内嵌元素</span>
</directive>
<script src="js/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.directive("directive", function() {
    return {
        restrict : "E",
        template : "<h1>自定义指令!<span ng-transclude></span></h1>",
        transclude:true
    };
});
</script>
</body>

结果是：
这里写图片描述
html标签结构变成了这样：

代码里面多了个transclude:true，于是内部出现了子标签。
transclude就是用来处理自定义标签内出现子标签的情况。
关于compile和link
指令的本质其实是一个替换过程。这个过程分2个阶段，也就是compile（编译）和link（连接）。
简而言之，compile阶段进行标签解析和变换，link阶段进行数据绑定等操作。这里面更加细节的处理过程请参见《AngularJS》这本书中的解析。
举个栗子

var expanderModule=angular.module('expanderModule', [])
expanderModule.directive('expander', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        scope : {
            title : '=expanderTitle'
        },
        template : '<div>'
                 + '<div class="title" ng-click="toggle()">{{title}}</div>'
                 + '<div class="body" ng-show="showMe" ng-transclude></div>'
                 + '</div>',
        link : function(scope, element, attrs) {
            scope.showMe = false;
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;
            }
        }
    }
});
expanderModule.controller('SomeController',function($scope) {
    $scope.title = '点击展开';
    $scope.text = '这里是内部的内容。';
});

HTML代码：

<html ng-app='expanderModule'>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="../angular-1.0.3/angular.min.js"></script>
        <link rel="stylesheet" type="text/css" href="ExpanderSimple.css"/>
    </head>
    <body>
        <div ng-controller='SomeController'>
            <expander class='expander' expander-title='title'>
                {{text}}
            </expander>
        </div>
    </body>
    <script src="ExpanderSimple.js"></script>
    <script src="js/angular.js"></script>
</html>

CSS代码：

.expander {
    border: 1px solid black;
    width: 250px;
}

.expander>.title {
    background-color: orange;
    color: white;
    padding: .1em .3em;
    cursor: pointer;
}

.expander>.body {
    padding: .1em .3em;
}

效果如下：
这里写图片描述
项目开发中经常会用到link进行事件的晚绑定。
综合复杂的栗子

JS代码：

var expModule=angular.module('expanderModule',[])
expModule.directive('accordion', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        template : '<div ng-transclude></div>',
        controller : function() {
            var expanders = [];
            this.gotOpened = function(selectedExpander) {
                angular.forEach(expanders, function(expander) {
                    if (selectedExpander != expander) {
                        expander.showMe = false;
                    }
                });
            }
            this.addExpander = function(expander) {
                expanders.push(expander);
            }
        }
    }
});

expModule.directive('expander', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        require : '^?accordion',
        scope : {
            title : '=expanderTitle'
        },
        template : '<div>'
                   + '<div class="title" ng-click="toggle()">{{title}}</div>'
                   + '<div class="body" ng-show="showMe" ng-transclude></div>'
                   + '</div>',
        link : function(scope, element, attrs, accordionController) {
            scope.showMe = false;
            accordionController.addExpander(scope);
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;
                accordionController.gotOpened(scope);
            }
        }
    }
});

expModule.controller("SomeController",function($scope) {
    $scope.expanders = [{
        title : 'Click me to expand',
        text : 'Hi there folks, I am the content that was hidden but is now shown.'
    }, {
        title : 'Click this',
        text : 'I am even better text than you have seen previously'
    }, {
        title : 'Test',
        text : 'test'
    }];
});

HTML代码：

<html ng-app="expanderModule">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="../angular-1.0.3/angular.min.js"></script>
        <link rel="stylesheet" type="text/css" href="Accordion.css"/>
    </head>
    <body ng-controller='SomeController' >
        <accordion>
            <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
                {{expander.text}}
            </expander>
        </accordion>
    </body>
    <script src="Accordion.js"></script>
</html>

CSS代码：

.expander {
    border: 1px solid black;
    width: 250px;
}

.expander>.title {
    background-color: black;
    color: white;
    padding: .1em .3em;
    cursor: pointer;
}

.expander>.body {
    padding: .1em .3em;
}

重难点是子Expander里面访问外层Accordion的scope中的数据。

泡沫9水灵灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS中Directive（指令）机制详解

AngularJS 通过被称为指令的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。指令的作用：实现语义化标签。使用AngularJS的directive（指令）机制，我们可以实现这样的东西：<body ng-app="myApp"><directive></directive><script src="js/a
复制链接

扫一扫