学习笔记(3)-指令(Directive)

Author Avatar
itning 5月 02, 2018
  • 在其它设备中阅读本文章

指令(Directive)

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

指令API文档>>>

ng-app

  1. ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。
  2. 所有 AngularJS 应用都必须要一个根元素
  3. HTML文档中只允许有一个 ng-app 指令,如有多个 ng-app 指令,则只有第一个会被使用
  4. 常放在html标签上
<!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

  1. ng-repeat指令用来编译一个数组重复创建当前元素
  2. 元素如果相同可以使用 item in items track by $index
  3. 循环中的特殊变量,包括:
变量类型描述
$indexnumber当前索引。
$firstboolean当循环的对象存在第一项时为true。
$middleboolean当循环的对象存在中间项时为true。
$lastboolean当循环对象存在最后一项时为true。
$evenboolean当前索引是偶数则为true,否则为false
$oddboolean当前索引是奇数则为true,否则为false
<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时会转义,为了安全(跨站脚本攻击)

<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 函数来检测代码的安全性。

<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 时类才会被添加。
如果是数组,可以由字符串或对象组合组成,数组的元素可以是字符串或对象。

<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

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

ng-if

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

保留 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 代码执行前不显示图片。

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

原创内容,转载请注明出处!
本文链接:https://blog.itning.top/posts/angularJS/20180502-learnangularjs3.html