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

发布时间：2020-12-17 08:55:30 所属栏目：安全来源：网络整理

导读：指令（Directive） AngularJS 有一套完整的、可扩展的、用来帮助 Web 应用开发的指令集在 DOM 编译期间，和 HTML 关联着的指令会被检测到，并且被执行在 AngularJS 中将前缀为 ng- 这种属性称之为指令，其作用就是为 DOM 元素调用方法、定义行为绑定数据等

指令（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标签上

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

<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',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

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 中移除元素。

保留 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!