Tingkatkan HTML dengan arahan AngularJS

Ciri utama AngularJS ialah ia membolehkan kami memperluaskan fungsi HTML untuk memenuhi tujuan halaman web dinamik hari ini. Dalam artikel ini, saya akan menunjukkan kepada anda cara menggunakan arahan AngularJS untuk menjadikan pembangunan anda lebih pantas dan lebih mudah serta menjadikan kod anda lebih mudah diselenggara.

Sediakan

Langkah 1: Templat HTML

Untuk memudahkan urusan, kami akan menulis semua kod dalam fail HTML. Cipta dan letakkan templat HTML asas ke dalamnya:

Sekarang tambahkan failangular.min.jsdaripada Google CDN padadokumen:angular.min.js文件添加到文档的中：

第 2 步：创建模块

现在让我们为指令创建模块。我将其称为example，但您可以选择任何您想要的名称，只需记住我们将使用此名称作为稍后创建的指令的命名空间。

将此代码放在底部的脚本标记中：

var module = angular.module('example', []);

我们没有任何依赖项，因此angular.module()的第二个参数中的数组为空，但不要完全删除它，否则您将得到 $injector:nomod错误，因为angular.module()的单参数形式检索对已存在模块的引用，而不是创建新模块。

您还必须将ng-app="example"属性添加到标记才能使应用程序正常工作。之后文件应如下所示：

属性指令：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' };

您应该将其放在