AngularJS 的主要特点是它允许我们扩展 HTML 的功能来服务于当今动态网页的目的。在本文中，我将向您展示如何使用 AngularJS 的指令来使您的开发更快、更轻松，并且使您的代码更易于维护。
准备
第 1 步：HTML 模板
为了让事情变得更简单，我们将把所有代码编写在一个 HTML 文件中。创建它并将基本的 HTML 模板放入其中：
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
现在将来自 Google CDN 的 angular.min.js 文件添加到文档的 中：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
第 2 步：创建模块
现在让我们为指令创建模块。我将其称为 example，但您可以选择任何您想要的名称，只需记住我们将使用此名称作为稍后创建的指令的命名空间。
将此代码放在 底部的脚本标记中：
var module = angular.module('example', []);
我们没有任何依赖项，因此 angular.module() 的第二个参数中的数组为空，但不要完全删除它，否则您将得到 $injector:nomod错误，因为 angular.module() 的单参数形式检索对已存在模块的引用，而不是创建新模块。
您还必须将 ng-app="example" 属性添加到 标记才能使应用程序正常工作。之后文件应如下所示：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <script> var module = angular.module('example', []); </script>
</head>
<body ng-app="example">
</body>
</html>
属性指令：1337 C0NV3R73R
首先，我们将创建一个简单的指令，其工作方式与 ngBind 类似，但它将把文本更改为 leet talk。
第 1 步：指令声明
使用 module.directive() 方法声明指令：
module.directive('exampleBindLeet', function () {
第一个参数是指令的名称。它必须采用驼峰式命名法，但由于 HTML 不区分大小写，因此您将在 HTML 代码中使用破折号分隔的小写形式 (example-bind-leet)。
作为第二个参数传递的函数必须返回一个描述该指令的对象。目前它只有一个属性：链接函数：
return {
link: link
};
});
第2步：链接函数
您可以在 return 语句之前定义函数，也可以直接在返回的对象中定义该函数。它用于操作我们的指令所应用的元素的 DOM，并使用三个参数进行调用：
function link($scope, $elem, attrs) {
$scope 是一个 Angular 范围对象，$elem 是该指令匹配的 DOM 元素（它包装在 jqLite 中，jqLite 是 AngularJS 的 jQuery 最常用函数的子集） attrs 是一个具有所有元素属性的对象（具有规范化名称，因此 example-bind-leet 将可用作 attrs.exampleBindLeet）。
我们的指令中此函数的最简单的代码如下所示：
var leetText = attrs.exampleBindLeet.replace(/[abegilostz]/gmi, function (letter) {
return leet[letter.toLowerCase()];
});
$elem.text(leetText);
}
首先，我们将 example-bind-leet 属性中提供的文本中的一些字母替换为 leet 表中的替换内容。该表如下所示：
var leet = {
a: '4', b: '8', e: '3',
g: '6', i: '!', l: '1',
o: '0', s: '5', t: '7',
z: '2'
};
2、本站所有文章、图片、资源等如果未标明原创，均为收集自互联网公开资源；分享的图片、资源、视频等，出镜模特均为成年女性正常写真内容，版权归原作者所有，仅作为个人学习、研究以及欣赏！如有涉及下载请24小时内删除；
3、如果您发现本站上有侵犯您的权益的作品，请与我们取得联系，我们会及时修改、删除并致以最深的歉意。邮箱： i-hu#（#换@）foxmail.com
