Angualr的指令入门

最新推荐文章于 2022-10-12 18:55:39 发布

末小北

最新推荐文章于 2022-10-12 18:55:39 发布

阅读量561

点赞数

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

本文链接：https://blog.csdn.net/linmufeng326/article/details/50908108

版权

Angularjs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

对于Angular，指令是很重要，也是它的特色部分，
1.指令的作用：实现语义化标签
我们常用的html标签是这样的，

<div>你好，我是angularjs</div>

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

<hello>你好，我是angularjs</hello>

类似于xml的格式，其实从原理上讲，它只不过是将定义的标签转化成相应的html标签，或者也可以说是替换。
2.简单实例

<!doctype html>
<html ng-app="app">

<head>
    <meta charset="UTF-8">
    <title>Angular</title>
    <script src="/an/js/1.3.20/angular.js"></script>
    <script src="js/app.js"></script>
</head>
<body>
    <hello></hello>
</body>
</html>

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

var app = angular.module("app", []);
app.directive('hello',function(){
    return {
         restrict: 'E',
        template:'<div>你好，我是angular</div>',
        replace: true
    };
});
<!--'hello'是指你自定义的标签，temlate是指你要转换的html标签-->

运行的结果和实际解析的标签结构如下
这里写图片描述

可以看到，这个东东已经被

你好，我是angular

这个标签替换掉了，这也是以上JS代码里面replace:true这行配置的作用，代码里面的template配置项当然就是我们要的div标签啦，至于restrict:’E’这个配置项的含义，请看

字母	声明风格	示例
E	元素	`<my-directive></my-directive>`
A	属性	`<div my-directive></div>`
C	样式类	`<div class="my-directive"></div>`
M	注释类	`<!--directive:my-directive-->`

以上就是对于restrict这个属性的解释。
3.实例2：transclude（变换）
看一下js代码

var app = angular.module("app", []);
app.directive('hello',function(){
    return {
         restrict: 'E',
        template:'<div>你好，我是angular<span ng-transclude></span></div>',
         transclude: true
    };
});

html代码如下

<!doctype html>
<html ng-app="app">

<head>
    <meta charset="UTF-8">
    <title>app</title>
    <script src="/an/js/1.3.20/angular.js"></script>
    <script src="/an/js/1.3.20/angular-route.js"></script>
    <script src="/an/js/1.3.20/angular-animate.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controller.js"></script>
</head>

<body>
    <hello>
        <span>这是原始内容</span>
    </hello>
</body>

</html>