AngularJS 지시어로 HTML 향상-Word누르다-php.cn

使用 AngularJS 指令增强 HTML

AngularJS의 주요 기능은 오늘날의 동적 웹 페이지의 목적에 맞게 HTML의 기능을 확장할 수 있다는 것입니다. 이 기사에서는 AngularJS의 지시문을 사용하여 개발을 더 빠르고 쉽게 만들고 코드를 더 유지 관리하기 쉽게 만드는 방법을 보여 드리겠습니다.

준비하세요

1단계: HTML 템플릿

작업을 더 쉽게 하기 위해 모든 코드를 하나의 HTML 파일에 작성하겠습니다. 그것을 만들고 기본 HTML 템플릿을 넣으세요:

으아악

는 이제 angular.min.js 文件添加到文档的 의 Google CDN에서 제공됩니다:

으아악

2단계: 모듈 만들기

이제 지시어에 대한 모듈을 만들어 보겠습니다. 저는 이를 example이라고 부르겠지만 원하는 이름을 선택할 수 있습니다. 나중에 생성할 지시문의 네임스페이스로 이 이름을 사용할 것이라는 점만 기억하세요.

이 코드를 하단의 스크립트 태그에 넣으세요:

으아악

우리는 종속성이 없으므로 angular.module() 的第二个参数中的数组为空，但不要完全删除它，否则您将得到 $injector:nomod错误，因为 angular.module()의 단일 인수 형식은 새 모듈을 생성하는 대신 기존 모듈에 대한 참조를 검색합니다.

앱이 제대로 작동하려면 ng-app="example" 属性添加到 로 표시해야 합니다. 그러면 파일은 다음과 같아야 합니다:

으아악

속성 명령: 1337 C0NV3R73R

먼저 ngBind와 유사하게 작동하지만 텍스트가 leet talk로 변경되는 간단한 지시문을 만듭니다.

1단계: 지침문

module.directive() 메서드를 사용하여 지시문을 선언합니다.

으아악

첫 번째 매개변수는 명령의 이름입니다. CamelCase여야 하지만 HTML은 대소문자를 구분하지 않으므로 HTML 코드에서는 대시로 구분된 소문자(example-bind-leet)를 사용합니다.

두 번째 인수로 전달된 함수는 명령을 설명하는 객체를 반환해야 합니다. 현재 속성은 하나만 있습니다: 링크 기능:

으아악

2단계: 링크 기능

return 문 이전에 또는 반환된 객체에서 직접 함수를 정의할 수 있습니다. 이는 지시문이 적용되는 요소의 DOM을 조작하는 데 사용되며 세 가지 매개변수로 호출됩니다.

으아악

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

지시문에서 이 함수에 대한 가장 간단한 코드는 다음과 같습니다.

으아악

먼저 example-bind-leet 속성에 제공된 텍스트의 일부 문자를 leet 테이블의 대체 내용으로 바꿉니다. 테이블은 다음과 같습니다:

으아악

<script></script> 표시 위에 놓아야 합니다. 보시다시피 이것은 10개의 문자만 대체하므로 가장 기본적인 leet 변환기입니다.

그런 다음 문자열을 leet say로 변환하고 이를 jqLite의 text() 메소드를 사용하여 이 지시어와 일치하는 요소의 내부 텍스트에 넣습니다.

이제 문서의 안에 HTML 코드를 배치하여 테스트할 수 있습니다.

으아악

출력은 다음과 같아야 합니다.

하지만 ngBind 지시문이 정확히 작동하는 방식은 아닙니다. 다음 단계에서 이를 변경하겠습니다.

3단계: 범위

우선, example-bind-leet 속성에 전달되는 내용은 변환하려는 텍스트가 아니라 현재 범위의 변수에 대한 참조여야 합니다. 이렇게 하려면 지시문에 대한 격리된 범위를 만들어야 합니다.

지시 함수의 반환 값에 범위 개체를 추가하면 이를 달성할 수 있습니다.

으아악

객체의 모든 속성은 지시어 범위 내에서 사용할 수 있습니다. 그 값은 여기의 값에 따라 결정됩니다. "-"를 사용하면 값은 동일한 이름을 가진 속성의 값과 동일합니다. "="를 사용하면 현재 범위에서 변수를 전달할 것으로 예상된다는 것을 컴파일러에 알릴 수 있습니다. 이는 ngBind:

처럼 작동합니다. 으아악

속성 이름으로 무엇이든 사용할 수도 있고 - 또는 = 뒤에 정규화된(camelCase로 변환된) 속성 이름을 넣을 수도 있습니다.

으아악

가장 적합한 것을 선택하세요. 이제 $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>

로그인 후 복사

第 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 的内容也按预期发生了变化。

元素指令：进度条

现在我们将编写一个指令来为我们创建一个进度条。为此，我们将使用一个新元素：<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;
}

로그인 후 복사

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

第 2 步：指令的属性

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

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

로그인 후 복사

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

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

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

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

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

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

로그인 후 복사

如您所见，我们还可以在模板中使用 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 + '%';
	}
}

로그인 후 복사

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

로그인 후 복사

这就是结果：

第 4 步：使用 jQuery 添加动画

如果您为 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 文档的一些链接：

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

위 내용은 AngularJS 지시어로 HTML 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

AngularJS 지시어로 HTML 향상

준비하세요

1단계: HTML 템플릿

2단계: 모듈 만들기

속성 명령: 1337 C0NV3R73R

1단계: 지침문

2단계: 링크 기능

3단계: 범위

第 4 步：检测更改

元素指令：进度条

第 1 步：样式

第 2 步：指令的属性

第3步：链接函数

第 4 步：使用 jQuery 添加动画

结论

有用链接