AngularJS实例详解Directive（指令）机制

最新推荐文章于 2018-07-07 10:59:04 发布

潘潘91

最新推荐文章于 2018-07-07 10:59:04 发布

阅读量3k

点赞数

文章标签： AngularJS

本文链接：https://blog.csdn.net/PanRuiFang/article/details/41204155

版权

AngularJS是为了克服HTML在构建应用上的不足而设计的。AngularJS中指令的重要性是不言而喻的，指令可以让我们创建自己的HTML标记，它将自定义元素变成了一个一个的模块，极大的体现了前端开发中的模块化模式，并提高了代码的易读性和重用性。指令除了可以定义为HTML标记，也可以定义为标签的元素、类和注释。

1. 小介绍

指令的作用：实现语义化标签

我们常用的HTML标签是这样的：

<div>
    <span>Something</span>
</div>

而使用AngularJS的directive（指令）机制，我们可以实现这样的东西：

<parentTag>
    <childTag1>子面板1</childTag1>
    <childTag2>子面板2</childTag2>
</parentTag>

这个是不是和JSP或者Struts等等框架里面的taglib很像呢？

呃，实际上确实是这样的，只不过AngularJS是使用JavaScript来实现的。正因为如此，很多taglib做不到的功能，使用它就都可以做到，比如访问N层scope里面的对象之类的事情。

2. AngularJS Directive实例

2.1 实例1：从最简单的开始

<html ng-app='DiretiveDemo'>
    <body>
        <hello></hello>
    </body>

    <script type="text/javascript" src="scripts/angular.js"></script>
    <script type="text/javascript" src="scripts/diretiveDemo.js"></script>
</html>

对于以上代码里面的<hello>标签，浏览器显然是不认识的，它唯一能做的事情就是无视这个标签。那么，为了让浏览器能够认识这个标签，我们需要使用Angular来定义一个hello指令（本质上说就是自己来把<hello>这种玩意儿替换成浏览器能识别的那些标准HTML标签）。

来看这段温馨的JS代码：

var appModule = angular.module('DiretiveDemo', [], angular.noop);
appModule.directive('hello', function() {
    return {
        restrict: 'E',
        template: '<div>Hello, this is hello.</div>',
        replace: true
    };
});

在浏览器中访问这个页面，我们就可以看到这样的内容：

实际产生的标签结构是这样的：

可以看到，<hello>这个东东已经被<div>Hello, this is hello.</div>这个标签替换掉了，这也是以上JS代码里面replace:true这行配置的作用，代码里面的template配置项当然就是我们要的div标签啦。你也可以尝试下replace:false这个配置，看看和true有什么区别。至于restrict:'E'这个配置项的含义，请看下表：

ok，看完上面的表格，对于restrict这个属性相信你已经秒懂了，那么我们来玩儿点花样吧。如果我们需要替换的HTML标签很长，显然不能用拼接字符串的方式来写，这时候我们可以用templateUrl来替代template，从而可以把模板写到一个独立的HTML文件中。

2.2 实例2：transclude（变换）

先看例子，JS代码：

var appModule = angular.module('DiretiveDemo', [], angular.noop);
appModule.directive('hello', function(){
  return {
    template: '<div>Hello Here <span ng-transclude></span></div>',
    restrict: 'E',
    transclude: true
    }
});

HTML代码：

<!DOCTYPE html>
<html ng-app='DiretiveDemo'>
<head>
	<title>Directive Demo</title>
</head>
<body>
	<hello>
	    <br>
	    <span>Original Content.</span>
	    <span>Content is Here.</span>
	</hello>
	<hr>	
	<hello></hello>
	<script type="text/javascript" src="scripts/angular.js"></script>
	<script type="text/javascript" src="scripts/diretiveDemo.js"></script>
</body>
</html>

运行效果如下：

生成的HTML标签结构如下：

和第一个例子对比，这个例子的JS和HTML代码都略有不同，JS代码里面多了一个transclude: true，HTML代码里面在<hello>内部出现了子标签。

按照我们在第一个例子中的说法，指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签。那好，如果我们自定义的标签内部出现了子标签，应该如何去处理呢？很显然，transclude就是用来处理这种情况的。

对于当前这个例子，transclude的作用可以简化地理解成：把<hello>标签替换成我们所编写的HTML模板，但是<hello>标签内部的内容保持不变。

很显然，由于我们没有加replace:true选项，所以<hello>标签还在，没有被替换掉。同时，通过这个例子你还还会发现一个暗藏的属性，那就是浏览器实际上非常智能，虽然它并不认识<hello>这个标签，但是页面没有出错，它只是默默地把这个标签忽略掉了！

你可以自己在上面的JS代码里面加上replace:true，然后再看生成的HTML结构。

2.3 实例3：关于compile和link

JS代码：

var appModule = angular.module('DiretiveDemo', [], angular.noop);
appModule.directive('hello', function(){
  return {
    template: '<div>Hello, this is hello.</div>',
    restrict: 'E',
    replace: true
    }
});

appModule.controller('MyCtrl', function($scope){
	$scope.ones=[1, 2, 3, 4, 5];
})

HTML代码：

<!DOCTYPE html>
<html ng-app='DiretiveDemo'>
<head>
	<title>Directive Demo</title>
</head>
<body ng-controller="MyCtrl">
	<div ng-repeat="one in ones">
		{{one}}.<hello></hello>
	</div>
	
	<script type="text/javascript" src="scripts/angular.js"></script>
	<script type="text/javascript" src="scripts/diretiveDemo.js"></script>
</body>
</html>

显示效果 + html标签结构：

呃，这个例子是用来解释一点点理论的，所以单纯看效果可能看不出个了。

如前所述，指令的本质其实是一个替换过程。好，既然如此，Angular到底是如何进行替换的呢？嗯嗯，这个过程分2个阶段，也就是compile（编译）和link（连接）了。

简而言之，compile阶段进行标签解析和变换，link阶段进行数据绑定等操作。

那么，知道这件事情有什么用途呢？

比方说，你有一些事件需要绑定到某个元素上，那么你需要提供一个link函数，做法请看下一个例子。

2.4 实例4：一个复杂一点的例子Expander

JS代码：

var expanderModule=angular.module('ExpanderDemo', [])
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代码：

<!DOCTYPE html>
<html ng-app='ExpanderDemo'>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Expander Demo</title>
	<link rel="stylesheet" type="text/css" href="styles/expanderDemo.css"/>
</head>
<body ng-controller="SomeController">
	 <div ng-controller='SomeController'>
            <expander class='expander' expander-title='title'>
                {{text}}
            </expander>
        </div>
	
	<script type="text/javascript" src="scripts/angular.js"></script>
	<script type="text/javascript" src="scripts/expanderDemo.js"></script>
</body>
</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;
}

运行效果如下：

注意一下JS代码里面的这一段：

link : function(scope, element, attrs) {
    scope.showMe = false;
    scope.toggle = function toggle() {
        scope.showMe = !scope.showMe;
    }
}

2.5 实例5：一个综合的例子

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中的数据。

潘潘91

关注

0
点赞
踩
1

收藏

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

AngularJS是为了克服HTML在构建应用上的不足而设计的。AngularJS中指令的重要性是不言而喻的，指令可以让我们创建自己的HTML标记，它将自定义元素变成了一个一个的模块，极大的体现了前端开发中的模块化模式，并提高了代码的易读性和重用性。指令也可以定义为标签的元素
复制链接

扫一扫