学习笔记（3）-指令（Directive)

指令（Directive）

AngularJS 有一套完整的、可扩展的、用来帮助 Web 应用开发的指令集在 DOM 编译期间，和 HTML 关联着的指令会被检测到，并且被执行在 AngularJS 中将前缀为 ng- 这种属性称之为指令，其作用就是为 DOM 元素调用方法、定义行为绑定数据等简单说：当一个 Angular 应用启动，Angular 就会遍历 DOM 树来解析 HTML，根据指令不同，完成不同操作 HTML5 允许扩展的（自制的）属性，以 data- 开头。 AngularJS 属性以 ng- 开头，但是可以使用 data-ng- 来让网页对 HTML5 有效。

指令API文档»>

ng-app

ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。
所有 AngularJS 应用都必须要一个根元素。
HTML文档中只允许有一个 ng-app 指令，如有多个 ng-app 指令，则只有第一个会被使用。
常放在html标签上

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="zh-CN" ng-app="MyApp"> <!--常放于此-->
<head>
  <meta charset="UTF-8">
  <title>ng-app 指令</title>
</head>
<body>
  <script>
	  var myp = angular.module("MyApp", []);
	  myp.controller('HelloController', ['$scope',function($scope) {
            $scope.p = {name: 'MyName'};
        }
    ]);
  </script>
</body>
</html>

ng-repeat

ng-repeat指令用来编译一个数组重复创建当前元素
元素如果相同可以使用 item in items track by $index
循环中的特殊变量，包括：

变量	类型	描述
$index	number	当前索引。
$first	boolean	当循环的对象存在第一项时为true。
$middle	boolean	当循环的对象存在中间项时为true。
$last	boolean	当循环对象存在最后一项时为true。
$even	boolean	当前索引是偶数则为true，否则为false
$odd	boolean	当前索引是奇数则为true，否则为false

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<body ng-app="myApp">
<ul ng-controller="ListController">
  <!-- ng-repeat 会遍历数组中每一个元素，分别创建li -->
  <li ng-repeat="item in items" data-id="{{item.id}}">
    <p>{{item.name}}</p>
  </li>
</ul>
  <script src="../angular/angular.js"></script>
  <script>
    angular.module('myApp', [])
      .controller('ListController', ['$scope', function($scope) {
        $scope.items= [];
        for (var i = 1; i < 10; i++) {
          $scope.items[$scope.items.length] = {
            id: i,
            name: 'id:' + i,
          };
        }
      }]);
  </script>
</body>

ng-bind

ng-bind指令在绑定的值包含HTML时会转义，为了安全（跨站脚本攻击）

1
2
3
4
5
<body ng-app ng-init="username='<h1>shit</h1>'">
  <!-- <strong>{{username}}</strong> -->
  <strong ng-bind="username"></strong>
  <script src="../angular/angular.js"></script>
</body>

ng-bind-html

ng-bind-html 指令是通一个安全的方式将内容绑定到 HTML 元素上。当你想让 AngularJS 在你的应用中写入 HTML，你就需要去检测一些危险代码。通过在应用中引入 “angular-santize.js” 模块，使用 ngSanitize 函数来检测代码的安全性。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<body ng-app="myApp" ng-init="username='<h1>shit</h1>'">
  <!-- <strong>{{username}}</strong> -->
  <!-- ng-bind指令在绑定的值包含HTML时会转义，为了安全（跨站脚本攻击） -->
  <strong ng-bind-html="username"></strong>
  <script src="../angular/angular.js"></script>
  <script src="../angular-sanitize/angular-sanitize.js"></script>
  <script>
    // 使用自定义的模块才可以依赖别的包里面定义模块，angular定义的默认模块没有依赖任何
    angular.module('myApp', ['ngSanitize']);
  </script>

ng-class

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。 ng-class 指令的值可以是字符串，对象，或一个数组。如果是字符串，多个类名使用空格分隔。如果是对象，需要使用 key-value 对，key 是一个布尔值，value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

1
2
3
4
5
<ul class="messages">
    <li ng-repeat="item in messages track by $index" ng-class="{red:item.read}">
        {{item.content}}
    </li>
</ul>

ng-show/ng-hide

ng-show 指令在表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素。
ng-hide 指令在表达式为 true 时隐藏 HTML 元素。
ng-hide 是 AngularJS 的预定义类，设置元素的 display 为 none。

ng-if

ng-if 指令用于在表达式为 false 时移除 HTML 元素。如果 if 语句执行的结果为 true，会添加移除元素，并显示。 ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。

1
2
3
4
5
6
7
保留 HTML:
<input type="checkbox" ng-model="myVar"  ng-init="myVar = true">
<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>

尝试一下»>

ng-href/ng-src

ng-href 指令覆盖了原生的 <a> 元素 href 属性。如果在 href 的值中有 AngularJS 代码，则需要使用 ng-href 而不是 href。 ng-href 指令确保了链接是正常的，即使在 AngularJS 执行代码前点击链接。

ng-src 指令覆盖了 <img> 元素的 src 属性。如果你使用了 AngularJS 代码设置图片地址，请使用 ng-src 指令替代 src 属性。 ng-src 指令确保的 AngularJS 代码执行前不显示图片。

1
2
<img ng-src="{{imgUrl}}" alt="">
<a ng-href="{{imgUrl}}">跳转到图片</a>

文章目录

指令（Directive）

ng-app

ng-repeat

ng-bind

ng-bind-html

ng-class

ng-show/ng-hide

ng-if

ng-href/ng-src