집 >웹 프론트엔드 >JS 튜토리얼 >AngularJs 사용자 정의 지시문을 설정하는 방법 및 사용자 정의 지시문의 명명 규칙

AngularJs 사용자 정의 지시문을 설정하는 방법 및 사용자 정의 지시문의 명명 규칙

不言원래의: 2018-07-21 16:27:241770검색

AngularJS는 사용자 정의 지침 기능을 제공합니다. 이 기능을 통해 일부 태그를 사용자 정의하여 자체 개발에 도움을 줄 수 있습니다. 다음 내용에서는 지시문과 제한을 통해 AngularJs에서 사용자 지정 지침을 설정하는 방법을 알려 드리겠습니다.

1. AngularJs 사용자 정의 지시어의 제한 속성에 대한 설명:

오늘의 공개 HTML 부분:

<h1 zym-blog></h1>

JavaScript 부분:

var m = angular.module(&#39;app&#39;, []);
m.directive(&#39;zymBlog&#39;, [function(){
	return {
		restrict : &#39;AEC&#39;,
		template : &#39;<p>hello world</p>&#39;,
		replace : true
	};
}]);

지시어를 통해 사용자 정의 지시어를 설정합니다. 첫 번째 매개변수는 지시문 이름입니다. 두 매개변수는 콜백 함수를 포함한 배열입니다. 함수의 반환 값은 json 객체입니다. 여기서

restrict는 명령의 형식을 나타냅니다. A는 속성, E는 요소입니다. , C는 클래스입니다. 클래스 난독화 스타일을 피하기 위해 C는 권장되지 않습니다.

template은 템플릿 콘텐츠로, 이 사용자 정의 속성을 사용하여 태그에 삽입할 콘텐츠를 나타냅니다.

교체 값의 기본값은 false입니다. true인 경우 이 사용자 정의 명령을 사용하는 HTML 코드의 태그가 템플릿의 태그로 대체되어야 함을 의미합니다. 바꾸기를 사용하는 경우 템플릿에는 몇 단어가 아닌 html 요소가 포함되어야 합니다. 그렇지 않으면 Angular가 오류를 보고합니다.

다른 속성을 살펴보겠습니다. templateUrl과 템플릿은 동시에 나타날 수 없습니다. templateUrl은 참조된 템플릿 주소입니다:

var m = angular.module(&#39;app&#39;, []);
m.directive(&#39;zymBlog&#39;, [function(){
	return {
		restrict : &#39;AEC&#39;,
		templateUrl : &#39;./46-1.html&#39;,
		replace : true
	};
}]);

여기서는 바꾸기를 사용하므로 templateUrl에 해당하는 템플릿 콘텐츠에는 html 태그 요소가 포함되어야 합니다.

2. 사용자 정의 명령어의 표준 명명 규칙:

지시어 명령어 이름은 [zymBlog]와 같은 카멜 케이스 이름을 사용하며, HTML 코드를 호출할 때 다음과 같이 대문자 앞에 가로 막대를 추가해야 합니다. [zymBlog] zym-블로그].

3. 사용자 정의 명령 템플릿의 기능적 작동:

템플릿은 문자열일 뿐만 아니라 다음과 같은 함수일 수도 있습니다:

var m = angular.module(&#39;app&#39;, []);
m.directive(&#39;zymBlog&#39;, [function(){
	return {
		restrict : &#39;AEC&#39;,
		template : function(){
			return &#39;<p>赵一鸣个人技术博客</p>&#39;;
		},
		replace : true
	};
}]);

4. 사용자 정의 명령 transclude 속성:

상황이 있습니다. html에서는 사용자 정의 명령이 사용되지만 태그 내부에 내용이 있습니다. 이 경우 사용자 정의 명령의 내용이 태그의 원래 내용을 대체하므로 이 문제를 해결하려면 속성을 추가해야 합니다(ng-transclude). ):

html 부분:

<h1 zym-blog>赵一鸣博客http://www.zymseo.com</h1>

js 부분:

var m = angular.module(&#39;app&#39;, []);
m.directive(&#39;zymBlog&#39;, [function(){
	return {
		restrict : &#39;AEC&#39;,
		template : function(){
			return &#39;<p>赵一鸣AngularJs学习笔记<span ng-transclude></span></p>&#39;;
		},
		replace : true,
		transclude : true
	};
}]);

ng-transclude 값을 true로 설정한 후 사용자 지정 명령어 내부에 다른 태그를 추가하고 ng-transclude를 지정해야 원본 HTML이 내용을 넣을 수 있습니다. 태그에 이 태그에!

AngularJs 사용자 정의 지시문을 설정하는 방법 및 사용자 정의 지시문의 명명 규칙

관련 기사