AngularJS 지시어로 HTML 향상

王林
풀어 주다: 2023-08-27 08:01:15
원래의
712명이 탐색했습니다.

使用 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 元素(它包装在 jqLit​​e 中,jqLit​​e 是 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 或创建一个控制器,并将 divexample-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:relativeposition: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 的宽度,因为 jqLit​​e 不支持 .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 添加动画

如果您为 progressValueprogressMax 添加输入,如下所示:

<input ng-model="progressValue"> 
<input ng-model="progressMax">
로그인 후 복사

您会注意到,当您更改任何值时,宽度会立即发生变化。为了让它看起来更好一点,让我们使用 jQuery 来制作它的动画。将 jQuery 与 AngularJS 结合使用的好处是,当您包含 jQuery 的 <script> 时,Angular 会自动用它替换 jqLit​​e,使 $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
  • jqLit​​e(angular.element)API

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿