AngularJS 的主要特点是它允许我们扩展 HTML 的功能来服务于当今动态网页的目的。在本文中,我将向您展示如何使用 AngularJS 的指令来使您的开发更快、更轻松,并且使您的代码更易于维护。
为了让事情变得更简单,我们将把所有代码编写在一个 HTML 文件中。创建它并将基本的 HTML 模板放入其中:
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
现在将来自 Google CDN 的 angular.min.js
文件添加到文档的 <head>
中:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
现在让我们为指令创建模块。我将其称为 example,但您可以选择任何您想要的名称,只需记住我们将使用此名称作为稍后创建的指令的命名空间。
将此代码放在 <head>
底部的脚本标记中:
var module = angular.module('example', []);
我们没有任何依赖项,因此 angular.module()
的第二个参数中的数组为空,但不要完全删除它,否则您将得到 $injector:nomod错误,因为 angular.module()
的单参数形式检索对已存在模块的引用,而不是创建新模块。
您还必须将 ng-app="example"
属性添加到 <body>
标记才能使应用程序正常工作。之后文件应如下所示:
<!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>
首先,我们将创建一个简单的指令,其工作方式与 ngBind 类似,但它将把文本更改为 leet talk。
使用 module.directive()
方法声明指令:
module.directive('exampleBindLeet', function () {
第一个参数是指令的名称。它必须采用驼峰式命名法,但由于 HTML 不区分大小写,因此您将在 HTML 代码中使用破折号分隔的小写形式 (example-bind-leet)。
作为第二个参数传递的函数必须返回一个描述该指令的对象。目前它只有一个属性:链接函数:
return { link: link }; });
您可以在 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 转换器,因为它仅替换十个字符。
之后,我们将字符串转换为 leet say,我们使用 jqLite 的 text()
方法将其放入该指令匹配的元素的内部文本中。
现在您可以通过将此 HTML 代码放入文档的 <body>
中来测试它:
<div example-bind-leet="This text will be converted to leet speak!"></div>
输出应如下所示:
但这并不完全是 ngBind
指令的工作原理。我们将在接下来的步骤中改变这一点。
首先,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
属性的值更改为您使用的变量的名称:
<body ng-app="example" ng-init="textToConvert = 'This text will be converted to leet speak!'"> <div example-bind-leet="textToConvert"></div> </body>
但这仍然不是 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
的内容也按预期发生了变化。
现在我们将编写一个指令来为我们创建一个进度条。为此,我们将使用一个新元素:<example-progress>
。
为了让我们的进度条看起来像一个进度条,我们必须使用一些 CSS。将此代码放入文档的 <head>
中的 <style>
元素中:
example-progress { display: block; width: 100%; position: relative; border: 1px solid black; height: 18px; } example-progress .progressBar { position: absolute; top: 0; left: 0; bottom: 0; background: green; } example-progress .progressValue { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; }
正如你所看到的,它非常基本 - 我们使用 position:relative
和 position:absolute
的组合来定位绿色条和 <example-progress>
元素。
与前一个相比,这个需要更多的选项。看一下这段代码(并将其插入到您的 <script>
标记中):
module.directive('exampleProgress', function () { return { restrict: 'E', scope: { value: '=', max: '=' }, template: '', link: link }; });
正如您所看到的,我们仍然使用范围(这次有两个属性 - value 表示当前值,max 表示最大值)和 link() 函数,但有两个新属性:
当然,我们不会将模板留空。将此 HTML 放在那里:
<div class="progressBar"></div><div class="progressValue">{{ percentValue }}%</div>
如您所见,我们还可以在模板中使用 Angluar 表达式 - percentValue
将从指令的范围中获取。
该函数与上一个指令中的函数类似。首先,创建一个将执行指令逻辑的本地函数 - 在本例中更新 percentValue
并设置 div.progressBar
的宽度:
function link($scope, $elem, attrs) { function updateProgress() { var percentValue = Math.round($scope.value / $scope.max * 100); $scope.percentValue = Math.min(Math.max(percentValue, 0), 100); $elem.children()[0].style.width = $scope.percentValue + '%'; } }
正如你所看到的,我们不能使用 .css()
来更改 div.progressBar 的宽度,因为 jqLite 不支持 .children( )
。我们还需要使用 Math.min()
和 Math.max()
将值保持在 0% 到 100% 之间 - 如果 precentValue 小于 0,则 Math.max()
将返回 0;如果 percentValue
大于 100,则 Math.min() 将返回 100。
现在不再是两个 $scope.$watch()
调用(我们必须注意 $scope.value
和 中的变化$scope.max
) 让我们使用 $scope.$watchCollection()
,它类似,但适用于属性集合:
$scope.$watchCollection('[value, max]', updateProgress);
请注意,我们传递的第一个参数看起来像数组,而不是 JavaScript 的数组。
要了解它是如何工作的,首先更改 ngInit
以初始化另外两个变量:
<body ng-app="example" ng-init="textToConvert = 'This text will be converted to leet speak!'; progressValue = 20; progressMax = 100">
然后在我们之前使用的 div
下面添加 <example-progress>
元素:
<example-progress value="progressValue" max="progressMax"></example-progress>
<body>
现在应该如下所示:
<body ng-app="example" ng-init="textToConvert = 'This text will be converted to leet speak!'; progressValue = 20; progressMax = 100"> <div example-bind-leet="textToConvert"></div> <example-progress value="progressValue" max="progressMax"></example-progress> </body>
这就是结果:
如果您为 progressValue
和 progressMax
添加输入,如下所示:
<input ng-model="progressValue"> <input ng-model="progressMax">
您会注意到,当您更改任何值时,宽度会立即发生变化。为了让它看起来更好一点,让我们使用 jQuery 来制作它的动画。将 jQuery 与 AngularJS 结合使用的好处是,当您包含 jQuery 的 <script>
时,Angular 会自动用它替换 jqLite,使 $elem
成为 jQuery 对象。
因此,让我们首先将 jQuery 脚本添加到文档的 <head>
中,位于 AngularJS 之前:
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
现在我们可以更改 updateProgress()
函数以使用 jQuery 的 .animate()
方法。更改此行:
$elem.children()[0].style.width = $scope.percentValue + '%';
对此:
$elem.children('.progressBar').stop(true, true).animate({ width: $scope.percentValue + '%' });
并且您应该有一个精美的动画进度条。我们必须使用 .stop() 方法来停止并完成任何待处理的动画,以防我们在动画进行过程中更改任何值(尝试删除它并快速更改输入中的值以了解为什么需要它)。 p>
当然,您应该更改 CSS,并可能在应用程序中使用其他一些缓动函数来匹配您的风格。
AngularJS 的指令对于任何 Web 开发人员来说都是一个强大的工具。您可以创建一组自己的指令来简化和促进您的开发过程。您可以创建的内容仅受您的想象力限制,您几乎可以将所有服务器端模板转换为 AngularJS 指令。
以下是 AngularJS 文档的一些链接:
以上是使用 AngularJS 指令增强 HTML的详细内容。更多信息请关注PHP中文网其他相关文章!