AngularJS入门心得3——HTML的左右手指令

悠悠 2021-12-24 18:51 228阅读 0赞

在《[AngularJS入门心得1——directive和controller如何通信][AngularJS_1_directive_controller]》我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。这里AngularJS就应运而生，弥补了HTML的天然缺陷，用于构件Web应用等。”

那么AngularJS如何弥补HTML的缺陷，指令可能是最好的回答。

指令是什么？？？

指令就是一些附加在HTML元素上的**自定义标记**（可以是属性A、元素E、css类C），可以通过AngularJS的HTML编译器（$compile）对这些标记附加**指定的行为，或者操作DOM、改变DOM元素**等。

说白了，就是HTML定义的标签不够多，不够强大，AngularJS通过指令可以让HTML识别更多的标签，具备更强的功能。

1.指令的规范化

在HTML命名规范中，因为不区分大小写，所以类似myCustomer和mycustomer是一样的，那么如何在HTML定义指令呢，常见的可以通过

（1） 加前缀：”**x-**“和”**data-**”

（2） 在指令名之间添加间隔符：”**:**”,”**-**”,”**\_**”

那么如何将HTML中的指令名转化为js中的变量，相应的，有两种方式：

（1） 从元素或属性的名字前面去掉x- and data-

（2） 从:, -, 或 \_分隔的形式转换成小驼峰命名法(camelCase)

举例：

HTML（通过分隔符标示）：

<!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Example - example-example11-production</title>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
      <script src="script.js"></script>
    </head>
    
    <body ng-app="docsSimpleDirective">
      <div ng-controller="Controller">
        <div my-customer></div>
      </div>
    </body>
    
    </html>

HTML（通过前缀标示）：

<!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Example - example-example11-production</title>
    
    
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
      <script src="script.js"></script>
    </head>
    
    <body ng-app="docsSimpleDirective">
      <div ng-controller="Controller">
        <div data-my-customer></div>
      </div>
    </body>
    
    </html>

script.js：

通过在**Plunker**中的实时显示结果如下：

（ps：Plunker介绍

简介：Plunker is an online community for creating, collaborating on and sharing your web development ideas. Plunker 是一个用来**创建、协作和分享** Web 开发思路的**在线社区**。

官网地址：[http://plnkr.co/][http_plnkr.co]

特点：

基于 **Node.js** 环境运行  
　　　　**实时**的代码协作  
　　　　全功能、可定制语法编辑器  
　　　　代码更改可即时**预览**效果  
　　　　代码提示  
　　　　可 Fork、评论和分享  
　　　　**完全开源**，使用 MIT 许可

）

![171453008579004.png][]

![171453224046289.png][]

2.指令匹配

AngularJS的$complie编译器可以基于**元素、属性、类名以及注释**来匹配指令。如：

<my-customer></my- customer >//元素
    
    <span my- customer ="exp"></span>//属性
    
    //注释
    
    <span class="my- customer: exp;"></span>//类名

注意：虽然上面的4种形式都可以进行指令匹配，但是，最好**通过标签名和属性来使用指令**而不要通过注释和类名。这样做可以更容易地看出一个元素是跟哪个指令匹配的。举例来说：

（1）通过元素匹配

index.html：

<!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Example - example-example11-production</title>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
      <script src="script.js"></script>
    
    </head>
    
    <body ng-app="docsSimpleDirective">
      <div ng-controller="Controller">
        <my-customer></my-customer>
      </div>
    </body>
    
    </html>

script.js：

在html中声明元素标签<my-customer></my-customer>，在js中通过”restrict：‘E’”表示是通过元素来匹配。

（2）通过属性匹配

index.html

<!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Example - example-example11-production</title>
    
    
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
      <script src="script.js"></script>
    
    </head>
    
    <body ng-app="docsSimpleDirective">
      <div ng-controller="Controller">
        <div my-customer></div>
      </div>
    </body>
    
    </html>

script.js:

在html中声明元素标签<div my-customer></div>，标签div中声明了属性my-customer，在js中通过”restrict：‘A’”表示是通过元素来匹配。

当然，以上的页面显示结果都是：

![171458130769987.png][]

其实本篇本来是要重点说说scope的理解以及举个例子来聊聊独立scope的一些机制，但是梳理一下就写完了这篇。

最近一直在熟悉业务，一直也没有跟进AngularJS，倒是在重新认识Javascript，只能说之前对于js的理解实在太浅，后面有时间会继续跟进javascript。

本文链接：《[AngularJS入门心得3——HTML的左右手指令][AngularJS_3_HTML]》

如果您觉得阅读本文对您有帮助，请点一下“**推荐**”按钮，您的**“推荐”**将是我最大的写作动力！如果您想持续关注我的文章，请扫描二维码，关注JackieZheng的微信公众号，我会将我的文章推送给您，并和您一起分享我日常阅读过的优质文章。

**友情赞助**

**如果你觉得博主的文章对你那么一点小帮助，恰巧你又有想打赏博主的小冲动，那么事不宜迟，赶紧扫一扫，小额地赞助下，攒个奶粉钱，也是让博主有动力继续努力，写出更好的文章^^。**

**　　　　1. 支付宝　　　　　　　　　　　　　　　　　　　　　　　　　　2. 微信**

![619240-20160827212039476-1331456611.png][]　　　　　　　　　　　　　　　　　　　　　　![619240-20160827212049257-755758856.png][]

转载于:https://www.cnblogs.com/bigdataZJ/p/AngularJS3.html

[AngularJS_1_directive_controller]: http://www.cnblogs.com/bigdataZJ/p/AngularJS1.html
[http_plnkr.co]: http://plnkr.co/
[171453008579004.png]: /images/20211223/f00479ccf2f64d46be80aa566b3de011.png
[171453224046289.png]: /images/20211223/79debbfa286f4121974782ffcf4ce96f.png
[171458130769987.png]: /images/20211223/c191fdcdab3a47a099b657a6f20fdf1b.png
[AngularJS_3_HTML]: http://www.cnblogs.com/bigdataZJ/p/AngularJS3.html
[619240-20160827212039476-1331456611.png]: https://images2015.cnblogs.com/blog/619240/201608/619240-20160827212039476-1331456611.png
[619240-20160827212049257-755758856.png]: /images/20211223/8bca56a7169f4145b48781081a1b409c.png