在《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：

(function(angular) {

  'use strict';

angular.module('docsSimpleDirective', [])

  .controller('Controller', ['$scope', function($scope) {

    $scope.customer = {

      name: 'Naomi',

      address: '1600 Amphitheatre'

    };

  }])

  .directive('myCustomer', function() {

    return {

      template: 'Name: {{customer.name}} Address: {{customer.address}}'

    };

  });

})(window.angular);

　　

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

　　（ps：Plunker介绍

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

　　官网地址：http://plnkr.co/

　　特点：

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

　　）

　　2.指令匹配

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

<my-customer></my- customer >//元素

<span my- customer ="exp"></span>//属性

<!-- directive: my- customer exp -->//注释

<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：

(function(angular) {

  'use strict';

angular.module('docsSimpleDirective', [])

  .controller('Controller', ['$scope', function($scope) {

    $scope.customer = {

      name: 'Naomi',

      address: '1600 Amphitheatre'

    };

  }])

  .directive('myCustomer', function() {

    return {

      restrict: 'E',

      template: 'Name: {{customer.name}} Address: {{customer.address}}'

    };

  });

})(window.angular);

　　在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:

(function(angular) {

  'use strict';

angular.module('docsSimpleDirective', [])

  .controller('Controller', ['$scope', function($scope) {

    $scope.customer = {

      name: 'Naomi',

      address: '1600 Amphitheatre'

    };

  }])

  .directive('myCustomer', function() {

    return {

      restrict: 'A',

      template: 'Name: {{customer.name}} Address: {{customer.address}}'

    };

  });

})(window.angular);

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

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

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

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

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

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

　　

友情赞助

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

　　　　1. 支付宝　　　　　　　　　　　　　　　　　　　　　　　　　　2. 微信

　　　　　　　　　　　　　　　　　　　　　　

AngularJS入门心得3——HTML的左右手指令的更多相关文章

  1. AngularJS入门心得4——漫谈指令scope

    上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...

  2. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  3. AngularJS入门心得1——directive和controller如何通信

    粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...

  4. （一）Angularjs - 入门

    AngularJS进行应用开发的一个重要的思维模式: 从构造声明式界面入手 ng-app: 这个指定定义并且关联了使用angularJS的HTML页面部分 ng-model: 这个指定定义并绑定Ang ...

  5. 【转载】图灵AngularJS入门教程

    摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...

  6. 《AngularJS入门与进阶》图书简介

    一.图书封面 二.图书CIP信息 图书在版编目(CIP)数据 AngularJS入门与进阶 / 江荣波著. – 北京 : 清华大学出版社, 2017 ISBN 978-7-302-46074-9 Ⅰ. ...

  7. 跟我学AngularJs:AngularJs入门及第一个实例

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...

  8. angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】

    事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...

  9. angularJS入门小Demo【简单测试js代码的方法】

    1.首先建立一个文件夹 demo, 2.在其中建立一个文本文档,改名为 demo-1.html, 3.把html中要引入的 js 文件拷贝到 demo目录下, 4.然后用 Notepadd++ 编辑刚 ...

随机推荐

  1. WIN8应用隐私声明

    隐私权声明 本应用连接网络仅为控制硬件设备,不会收集你的个人信息,也不共享你个个人信息. 应用名称 雅典娜移动客户端 关于本应用 本应仅为控制设备应用,不关注任何配置相关信息,所有数据均来自服务器端. ...

  2. 对初学者的MPLS 常见问题

    对初学者的MPLS 常见问题 2015年6月8日 16:04 阅读 186 问:什么是多协议标签交换 (MPLS)? 答:MPLS是一种数据包转发技术,该技术使用标签来做出数据转发决策. 利用MPLS ...

  3. linux指令之文件的创建、查询、修改

    mkdir(make directory) 功能:创建目录 案例: mkdir test 点评:将创建一个目录名为test的目录 rmdir(remove directory) 功能:删除目录 案例: ...

  4. DataTables 控件使用和心得 (2) - 参数Options

    什么是DataTables参数(Options) 上篇我们说了,DataTables控件的加载函数dataTable()一般都有一个对象参数,这个对象参数就是整个DataTables控件的参数(Opt ...

  5. 可在广域网部署运行的QQ高仿版 -- GG2014 完美版！新增支持：聊天记录、好友分组、托盘闪动消息提醒、登录状态、GIF动态表情

    距上次GG V3.7版本(可在广域网部署运行的QQ高仿版 -- GG叽叽V3.7,优化视频聊天.控制更多相关细节)的发布,已经有50天了,这50天对于GG来说,是一个重大的飞跃.因为这段时间通过一些基 ...

  6. node（thrift）

    thrift是一种跨语言的RPC框架,据说uber采在node.js项目中采用thrfit后,比原有的http+json的方式提高近20倍的性能. 所谓的RPC本质上就是客户端将需要调用的方法名和参数 ...

  7. kali linux Python开发环境初始化

    kali linux Python 黑客编程1 开发环境初始化 为什么要选择Python? Python作为目前Linux系统下最流行的编程语言之一,对于安全工作者的作用可以和C++相提并论.Pyth ...

  8. 冲刺阶段 day 9

    项目进展 昨天终于完成了教师部分的内容,今天我们又重新开始对之前系部设置不能实现的内容进行了编写,之前缺少删除和查询也做了补充,在与数据库的连接上也做了修改和更新. 存在问题 由于是之前遇到困难没做完 ...

  9. 【读书笔记】.Net并行编程高级教程（二）-- 任务并行

    前面一篇提到例子都是数据并行,但这并不是并行化的唯一形式,在.Net4之前,必须要创建多个线程或者线程池来利用多核技术.现在只需要使用新的Task实例就可以通过更简单的代码解决命令式任务并行问题. 1 ...

  10. HTML5 WebStorage

    WebStorage是HTML5中本地存储的解决方案之一,在HTML5的WebStorage概念引入之前除去IE User Data.Flash Cookie.Google Gears等看名字就不靠谱 ...