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

最新推荐文章于 2024-11-05 22:07:06 发布

baixieyun4655

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量113

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bigdataZJ/p/AngularJS3.html

版权

　　在《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’”表示是通过元素来匹配。

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