Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > AngularJS入门教程(四)指令详解和实践

    AngularJS入门教程(四)指令详解和实践

    HTML5 herman 3275浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    AngularJS除了强大的自定义服务外，还有更强大的指令。本章我们将继续前面的内容，更进一步的学习AngularJS的指令。

    AngularJS的指令（Directive）简介

    指令是AngularJS中另一个主要的特性，指令的作用可以用一句话描述，就是可以给HTML元素赋予特殊或自定义的行为，比如监听事件、视图模板代理等。在上文中我们使用过的ng-app、ng-controller、ng-model就是AngularJS中的指令。

    AngularJS指令的命名

    指令的命名和使用写法比较有意思，一般情况下在定义指令时推荐使用驼峰命名法，比如ngModel、ngApp，但是在HTML中大小写是不敏感的，所以在HTML中使用指令时推荐使用小写字母加破折号的形式，比如ng-model、ng-app。除了使用小写破折号这种方式，还有以下几种使用写法： 

    1. ng:model 
    2. ng_model 
    3. data-ng-bind 
    4. x-ng-bind

    大家可以根据自己喜好选择使用写法，但是尽量保持写法统一。

    AngularJS指令的形式

    在AngularJS中，指令有四种表现形式，既标签形式、标签属性形式、标签class名称形式、注释形式： 

    <my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>

    一般情况下，推荐使用标签形式和标签属性形式。

    指令的使用

    与Controller一样，指令也是通过AngularJS的Model创建的，使用directive(name, directiveFactory)方法创建指令，该方法有两个参数： 

    • 第一个参数为指令名称，命名规范在上文中已经说过了。 
    • 第二个参数是一个工厂函数，该函数需要返回一个对象，我们通过配置该对象中的不同属性从而告诉AngularJS内置的$compile服务实现指令的不同功能。

    指令的类型

    上文中说过指令的实现是通过工厂函数返回对象，然后通过配置对象的不同属性实现不同功能，所以设置指令的类型也是通过配置属性对象完成的： 

    var mainModule = angular.module("mainModule", []);
mainModule.directive("myDirective", function() {
  return {
    restrict: "A"
  };
});
mainModule.directive("myDirective1", function() {
  return {
    restrict: "E"
  };
});
mainModule.directive("myDirective2", function() {
  return {
    restrict: "AE"
  };
});
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo for Directive</title>
    <script src="../angular-1.5.8.js"></script>
    <script src="modules.js"></script>
  </head>
  <body ng-app="mainModule">
    <div my-directive></div>
    <my-directive1></my-directive1>
    <my-directive2></my-directive2>
    <!-- <div my-directive2></div> -->
  </body>
</html>

    从上面的示例代码可以看出，可以通过配置返回对象的restrict属性设置指令的类型，可配置的值分别为： 

    • "A"：代表且仅可代表标签属性类型的指令。 
    • "E"：代表且仅可代表标签类型的指令。 
    • "C"：代表且仅可代表class名称类型的指令。 
    • "M"：代表且仅可代表注释类型的指令。

    如果想设置一个多类型的指令，那么可以将类型标识写在一起，比如"AEC"代表既是标签属性类型，又是标签类型，还是class名称类型。如果不配置restrict属性，那么表示指令的类型为默认的"AE"类型。

    通过指令封装UI模板

    在前端应用的开发过程中，不同的页面常有很多一样的UI元素，如果每个页面都写一遍，那么在维护时就常会牵一发而动全身，AngularJS中的指令可以很好的解决这个问题，它可以将UI片段封装为一个指令，从而可以在不同的页面中复用，那么在维护时就是四两拨千斤的效果。下面来看看如何实现模板指令： 

    var mainModule = angular.module("mainModule", []);
mainModule.controller("MyController", function() {
  this.name = "Jason";
  this.job = "Developer";
});
mainModule.directive("myDirective", function() {
  return {
    template: "Name: {{mc.name}}, Job: {{mc.job}}"
  };
});
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo for Directive</title>
    <script src="../angular-1.5.8.js"></script>
    <script src="modules.js"></script>
  </head>
  <body ng-app="mainModule">
    <div ng-controller="MyController as mc">
      <my-directive></my-directive>
      <!-- <div my-directive></div> -->
    </div>
  </body>
</html>

    上面的代码示例中，我们将本该写在HTML中的展示代码设置给了返回对象的template属性。为了能更好的管理UI模板，我们还可以将UI展示代码提炼成单独的HTML模板文件，并可以使用指令的templateUrl属性设置HTML模板文件名称，这样便可以大大降低指令和UI模板的耦合度： 

    mainModule.directive("myDirective", function() {
  return {
    templateUrl: "myTemplate.html"
  };
});
    <!-- myTemplate.html -->
Name: {{mc.name}}, Job: {{mc.job}}

    那么问题来了，如果UI模板文件很多的话，按上面的方法就要写很多个对应的指令，而且只是UI模板文件名称不一样而已，实在有点冗余。AngularJS提供了另外一种解决方法，那就是可以通过给模板指令设置相关属性，从而动态的加载UI模板文件，我们来看看如何实现： 

    // modules.js
var mainModule = angular.module("mainModule", []);
mainModule.controller("MyController", function() {
  this.name = "Jason";
  this.job = "Developer";
});
mainModule.directive("myDirective", function() {
  return {
    templateUrl: function(elem, attr) {
      return "myTemplate-" + attr.type + ".html";
    }
  };
});
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo for Directive</title>
    <script src="../angular-1.5.8.js"></script>
    <script src="modules.js"></script>
  </head>
  <body ng-app="mainModule">
    <div ng-controller="MyController as mc">
      <my-directive type="name"></my-directive>
      <my-directive type="job"></my-directive>
      <!-- <div my-directive type="name"></div> -->
      <!-- <div my-directive type="job"></div> -->
    </div>
  </body>
</html>
    <!-- myTemplate-name.html -->
Name: {{mc.name}}
<!-- myTemplate-job.html -->
Job: {{mc.job}}

    从上面的示例代码可以看出，template和templateUrl两个属性的值不只是接受字符串，还接受函数。要注意的是该函数默认带两个参数： 

    • 第一个参数代表当前的HTML DOM元素。 
    • 第二个参数代表当前HTML DOM元素的属性对象，在函数体内可以为该对象设置任何属性。

    在上面的示例中，我们给代表当前DOM元素的属性对象设置了type属性，用于标识UI模板文件名称，这样我们就可以通过一个专有的模板指令来控制所有的UI模板文件了。

    版权声明：本文为博主原创文章，未经博主允许不得转载。

    业余草公众号

    最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

    本文原文出处：业余草： » AngularJS入门教程(四)指令详解和实践

    相关文章推荐