AngularJS 的主要特点是它允许我们扩展 HTML 的功能来服务于当今动态网页的目的。在本文中，我将向您展示如何使用 AngularJS 的指令来使您的开发更快、更轻松，并且使您的代码更易于维护。
准备
第 1 步：HTML 模板
为了让事情变得更简单，我们将把所有代码编写在一个 HTML 文件中。创建它并将基本的 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" 属性添加到
标记才能使应用程序正常工作。之后文件应如下所示：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script><script> var module = angular.module('example', []); </script> 登录后复制
属性指令：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'
};
登录后复制
您应该将其放在 <script> 标记的顶部。正如您所看到的，这是最基本的 leet 转换器，因为它仅替换十个字符。</script>
之后，我们将字符串转换为 leet say，我们使用 jqLite 的 text() 方法将其放入该指令匹配的元素的内部文本中。
现在您可以通过将此 HTML 代码放入文档的
中来测试它：<div example-bind-leet="This text will be converted to leet speak!"></div>登录后复制
输出应如下所示：
但这并不完全是 ngBind 指令的工作原理。我们将在接下来的步骤中改变这一点。
第 3 步：范围
首先，example-bind-leet 属性中传递的应该是对当前作用域中变量的引用，而不是我们要转换的文本。为此，我们必须为指令创建一个隔离的范围。
我们可以通过将作用域对象添加到指令函数的返回值来实现这一点：
module.directive('exampleBindLeet', function () {
...
return {
link: link,
scope: {
}
};
);
登录后复制
该对象中的每个属性都将在指令的范围内可用。它的值将由这里的值决定。如果我们使用“-”，则该值将等于与属性同名的属性的值。使用“=”将告诉编译器我们期望传递当前作用域中的变量 - 这将像 ngBind:
一样工作scope: {
exampleBindLeet: '='
}
登录后复制
您还可以使用任何内容作为属性名称，并将规范化（转换为驼峰命名法）的属性名称放在 - 或 = 后面：
scope: {
text: '=exampleBindLeet'
}
登录后复制
选择最适合您的。现在我们还必须更改链接函数以使用 $scope 而不是 attr：
function link($scope, $elem, attrs) {
var leetText = $scope.exampleBindLeet.replace(/[abegilostz]/gmi, function (letter) {
return leet[letter.toLowerCase()];
});
$elem.text(leetText);
}
登录后复制
现在使用 ngInit 或创建一个控制器，并将 div 的 example-bind-leet 属性的值更改为您使用的变量的名称：
<div example-bind-leet="textToConvert"></div>
登录后复制
第 4 步：检测更改
但这仍然不是 ngBind 的工作原理。要查看我们添加一个输入字段以在页面加载后更改 textToConvert 的值：
<input ng-model="textToConvert">登录后复制
现在，如果您打开页面并尝试更改输入中的文本，您将看到我们的 div 中没有任何变化。这是因为 link() 函数在编译时每个指令都会调用一次，因此它无法在每次范围内发生更改时更改元素的内容。
要改变这一点，我们将使用 $scope.$watch() 方法。它接受两个参数：第一个是 Angular 表达式，每次修改范围时都会对其进行求值，第二个是回调函数，当表达式的值发生更改时将被调用。
首先，让我们将 link() 函数中的代码放入其中的本地函数中：
function link($scope, $elem, attrs) {
function convertText() {
var leetText = $scope.exampleBindLeet.replace(/[abegilostz]/gmi, function (letter) {
return leet[letter.toLowerCase()];
});
$elem.text(leetText);
}
}
登录后复制
现在，在该函数之后，我们将调用 $scope.$watch()，如下所示：
$scope.$watch('exampleBindLeet', convertLeet);
登录后复制
如果您现在打开页面并更改输入字段中的某些内容，您将看到 div 的内容也按预期发生了变化。
元素指令：进度条
现在我们将编写一个指令来为我们创建一个进度条。为此，我们将使用一个新元素： 。
第 1 步：样式
为了让我们的进度条看起来像一个进度条，我们必须使用一些 CSS。将此代码放入文档的
中的以上就是使用 AngularJS 指令增强 HTML的详细内容，更多请关注慧达AI工具网其它相关文章！
