Erweitern Sie HTML mit AngularJS-Anweisungen-WordDrücken Sie-php.cn

使用 AngularJS 指令增强 HTML

Das Hauptmerkmal von AngularJS besteht darin, dass es uns ermöglicht, die Funktionalität von HTML zu erweitern, um den Zweck der heutigen dynamischen Webseiten zu erfüllen. In diesem Artikel zeige ich Ihnen, wie Sie die Direktiven von AngularJS verwenden, um Ihre Entwicklung schneller und einfacher zu machen und Ihren Code wartbarer zu machen.

Vorbereiten

Schritt 1: HTML-Vorlage

Zur Vereinfachung schreiben wir den gesamten Code in eine HTML-Datei. Erstellen Sie es und fügen Sie eine einfache HTML-Vorlage ein:

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

Nach dem Login kopieren

wird jetzt von Google CDN in angular.min.js 文件添加到文档的 <head> bereitgestellt:

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>

Nach dem Login kopieren

Schritt 2: Modul erstellen

Jetzt erstellen wir das Modul für die Direktive. Ich werde es Beispiel nennen, aber Sie können einen beliebigen Namen wählen. Denken Sie jedoch daran, dass wir diesen als Namensraum für die Direktive verwenden, die wir später erstellen.

Fügen Sie diesen Code in ein Skript-Tag am Ende von <head> ein:

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

Nach dem Login kopieren

Wir haben keine Abhängigkeiten, daher ruft die Einzelargumentform von angular.module() 的第二个参数中的数组为空，但不要完全删除它，否则您将得到 $injector:nomod错误，因为 angular.module() einen Verweis auf ein bereits vorhandenes Modul ab, anstatt ein neues Modul zu erstellen.

Sie müssen es auch mit ng-app="example" 属性添加到 <body> markieren, damit die App ordnungsgemäß funktioniert. Die Datei sollte dann so aussehen:

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

Nach dem Login kopieren

Attributbefehl: 1337 C0NV3R73R

Zuerst erstellen wir eine einfache Anweisung, die ähnlich wie ngBind funktioniert, aber den Text in „Leet Talk“ ändert.

Schritt 1: Anweisungserklärung

Deklarieren Sie Anweisungen mit der module.directive()-Methode:

module.directive('exampleBindLeet', function () {

Nach dem Login kopieren

Der erste Parameter ist der Name des Befehls. Es muss in der Schreibweise „camelCase“ angegeben werden, aber da bei HTML die Groß-/Kleinschreibung nicht beachtet wird, verwenden Sie im HTML-Code durch Bindestriche getrennte Kleinbuchstaben (example-bind-leet).

Die als zweites Argument übergebene Funktion muss ein Objekt zurückgeben, das die Anweisung beschreibt. Derzeit hat es nur ein Attribut: Linkfunktion:

    return {
		link: link
	};
});

Nach dem Login kopieren

Schritt 2: Linkfunktion

Sie können die Funktion vor der Return-Anweisung oder direkt im zurückgegebenen Objekt definieren. Es wird verwendet, um das DOM des Elements zu manipulieren, auf das unsere Direktive angewendet wird, und wird mit drei Argumenten aufgerufen:

function link($scope, $elem, attrs) {

Nach dem Login kopieren

$scope 是一个 Angular 范围对象，$elem 是该指令匹配的 DOM 元素（它包装在 jqLite 中，jqLite 是 AngularJS 的 jQuery 最常用函数的子集） attrs 是一个具有所有元素属性的对象（具有规范化名称，因此 example-bind-leet 将可用作 attrs.exampleBindLeet).

Der einfachste Code für diese Funktion in unserer Direktive sieht so aus:

    var leetText = attrs.exampleBindLeet.replace(/[abegilostz]/gmi, function (letter) {
	    return leet[letter.toLowerCase()];
    });

	$elem.text(leetText);
}

Nach dem Login kopieren

Zuerst ersetzen wir einige Buchstaben im im Attribut example-bind-leet bereitgestellten Text durch den Ersatzinhalt aus der Leet-Tabelle. Die Tabelle sieht so aus:

var leet = {
    a: '4', b: '8', e: '3',
	g: '6', i: '!', l: '1',
	o: '0', s: '5', t: '7',
	z: '2'
};

Nach dem Login kopieren

Sie sollten es oben auf der <script>-Markierung platzieren. Wie Sie sehen, ist dies der einfachste Leet-Konverter, da er nur zehn Zeichen ersetzt.

Danach konvertieren wir die Zeichenfolge in „leet say“, die wir mithilfe der text()-Methode von jqLite in den inneren Text des Elements einfügen, auf das diese Direktive zutrifft.

Jetzt können Sie diesen HTML-Code testen, indem Sie ihn in das <body> Ihres Dokuments einfügen:

<div example-bind-leet="This text will be converted to leet speak!"></div>

Nach dem Login kopieren

Die Ausgabe sollte so aussehen:

Aber genau so funktioniert die ngBind-Richtlinie nicht. Wir werden dies in den nächsten Schritten ändern.

Schritt 3: Umfang

Zunächst einmal sollte das, was im Attribut example-bind-leet übergeben wird, ein Verweis auf die Variable im aktuellen Bereich sein, nicht der Text, den wir konvertieren möchten. Dazu müssen wir einen isolierten Geltungsbereich für die Direktive erstellen.

Wir können dies erreichen, indem wir dem Rückgabewert der Direktivenfunktion ein Scope-Objekt hinzufügen:

module.directive('exampleBindLeet', function () {
    ...
	return {
		link: link,
		scope: {

		}
	};
);

Nach dem Login kopieren

Jede Eigenschaft im Objekt wird im Rahmen der Richtlinie verfügbar sein. Sein Wert wird durch den Wert hier bestimmt. Wenn wir „-“ verwenden, entspricht der Wert dem Wert des Attributs mit demselben Namen. Durch die Verwendung von „=" wird dem Compiler mitgeteilt, dass wir erwarten, Variablen im aktuellen Bereich zu übergeben – dies funktioniert wie folgt: ngBind:

scope: {
	exampleBindLeet: '='
}

Nach dem Login kopieren

Sie können auch alles als Eigenschaftsnamen verwenden und den normalisierten (in camelCase konvertierten) Eigenschaftsnamen nach - oder =:

einfügen

scope: {
	text: '=exampleBindLeet'
}

Nach dem Login kopieren

Wählen Sie diejenige, die am besten zu Ihnen passt. Jetzt müssen wir auch die Linkfunktion ändern, um $scope 而不是 attr zu verwenden:

function link($scope, $elem, attrs) {
    var leetText = $scope.exampleBindLeet.replace(/[abegilostz]/gmi, function (letter) {
		return leet[letter.toLowerCase()];
	});

	$elem.text(leetText);
}

Nach dem Login kopieren

现在使用 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>

Nach dem Login kopieren

第 4 步：检测更改

但这仍然不是 ngBind 的工作原理。要查看我们添加一个输入字段以在页面加载后更改 textToConvert 的值：

<input ng-model="textToConvert">

Nach dem Login kopieren

现在，如果您打开页面并尝试更改输入中的文本，您将看到我们的 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);
	}
}

Nach dem Login kopieren

现在，在该函数之后，我们将调用 $scope.$watch()，如下所示：

$scope.$watch('exampleBindLeet', convertLeet);

Nach dem Login kopieren

如果您现在打开页面并更改输入字段中的某些内容，您将看到 div 的内容也按预期发生了变化。

元素指令：进度条

现在我们将编写一个指令来为我们创建一个进度条。为此，我们将使用一个新元素：<example-progress>。

第 1 步：样式

为了让我们的进度条看起来像一个进度条，我们必须使用一些 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;
}

Nach dem Login kopieren

正如你所看到的，它非常基本 - 我们使用 position:relative 和 position:absolute 的组合来定位绿色条和 <example-progress> 元素。

第 2 步：指令的属性

与前一个相比，这个需要更多的选项。看一下这段代码（并将其插入到您的 <script> 标记中）：

module.directive('exampleProgress', function () {
    return {
		restrict: 'E',
		scope: {
			value: '=',
			max: '='
		},
		template: '',
		link: link
	};
});

Nach dem Login kopieren

正如您所看到的，我们仍然使用范围（这次有两个属性 - value 表示当前值，max 表示最大值）和 link() 函数，但有两个新属性：

restrict: 'E' - 这告诉编译器查找元素而不是属性。可能的值为：

'A' - 仅匹配属性名称（这是默认行为，因此如果您只想匹配属性，则无需设置它）
'E' - 仅匹配元素名称
'C' - 仅匹配类名

您可以将它们组合起来，例如“AEC”将匹配属性、元素和类名称。
template: '' - 这允许我们更改元素的内部 HTML（如果您想从单独的文件加载 HTML，还有 templateUrl）

当然，我们不会将模板留空。将此 HTML 放在那里：

<div class="progressBar"></div><div class="progressValue">{{ percentValue }}%</div>

Nach dem Login kopieren

如您所见，我们还可以在模板中使用 Angluar 表达式 - percentValue 将从指令的范围中获取。

第3步：链接函数

该函数与上一个指令中的函数类似。首先，创建一个将执行指令逻辑的本地函数 - 在本例中更新 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 + '%';
	}
}

Nach dem Login kopieren

正如你所看到的，我们不能使用 .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);

Nach dem Login kopieren

请注意，我们传递的第一个参数看起来像数组，而不是 JavaScript 的数组。

要了解它是如何工作的，首先更改 ngInit 以初始化另外两个变量：

<body ng-app="example" ng-init="textToConvert = 'This text will be converted to leet speak!'; progressValue = 20; progressMax = 100">

Nach dem Login kopieren

然后在我们之前使用的 div 下面添加 <example-progress> 元素：

<example-progress value="progressValue" max="progressMax"></example-progress>

Nach dem Login kopieren

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

Nach dem Login kopieren

这就是结果：

第 4 步：使用 jQuery 添加动画

如果您为 progressValue 和 progressMax 添加输入，如下所示：

<input ng-model="progressValue"> 
<input ng-model="progressMax">

Nach dem Login kopieren

您会注意到，当您更改任何值时，宽度会立即发生变化。为了让它看起来更好一点，让我们使用 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>

Nach dem Login kopieren

现在我们可以更改 updateProgress() 函数以使用 jQuery 的 .animate() 方法。更改此行：

$elem.children()[0].style.width = $scope.percentValue + '%';

Nach dem Login kopieren

对此：

$elem.children('.progressBar').stop(true, true).animate({ width: $scope.percentValue + '%' });

Nach dem Login kopieren

并且您应该有一个精美的动画进度条。我们必须使用 .stop() 方法来停止并完成任何待处理的动画，以防我们在动画进行过程中更改任何值（尝试删除它并快速更改输入中的值以了解为什么需要它）。 p>

当然，您应该更改 CSS，并可能在应用程序中使用其他一些缓动函数来匹配您的风格。

结论

AngularJS 的指令对于任何 Web 开发人员来说都是一个强大的工具。您可以创建一组自己的指令来简化和促进您的开发过程。您可以创建的内容仅受您的想象力限制，您几乎可以将所有服务器端模板转换为 AngularJS 指令。

有用链接

以下是 AngularJS 文档的一些链接：

开发者指南：指令
综合指令 API
jqLite（angular.element）API

Das obige ist der detaillierte Inhalt vonErweitern Sie HTML mit AngularJS-Anweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!