AngularJS는 사용자 정의 태그 속성을 지원하고 DOM 노드 작업을 사용하지 않고 사용자 정의 컨텐츠를 추가합니다.
AngularJS의 4 가지 주요 특징은 앞에서 언급했습니다.
1 MVC
2 모듈 식
3 지침
4 양방향 데이터 바인딩
다음이 소개됩니다.
1 명령을 사용자 정의하는 방법
2 사용자 정의 지침 사용
3 인라인 사용자 정의 지침 사용
지침을 사용자 정의하는 방법 :
Angular는 모듈 기반 프레임 워크이므로 자체 모듈을 만들어야합니다.
var myAppModule = Angular.Module ( "myApp", []);
그런 다음이 모듈에 대한 지침을 작성하십시오
myAppModule.directive ( "xingoo", function () {return {reteric : 'aecm', 템플릿 : '<div> 안녕하세요 내 지시문 </div>', 대체 : true}});그중에서도 Xingoo는 맞춤형 태그의 이름이며 메소드 기능이 뒤 따릅니다.
함수는 태그의 사용 방법, 속성 등을 정의하는 키 값 쌍 조합을 반환합니다.
그것이 무엇을 정의하는지 보자 :
1 제한 : 총 4 가지 유형, 즉 AECM으로 태그의 사용 방법을 정의합니다.
2 템플릿 : 태그의 템플릿을 정의합니다. 내부는 사용자 정의 태그를 교체하는 데 사용되는 문자열입니다
3 교체 : 교체 지원 여부
4 트랜스 클럽 : 내장을지지할지 여부
명령 사용 방법 :
위에서 언급 한 네 가지 방법, 즉 AECM을 사용합니다.
속성 : 속성으로 사용됩니다
<div xingoo> </div>
E 요소 : 레이블 요소로 사용됩니다
<xingoo> </xingoo>
C 클래스 : CSS 스타일로 사용됩니다
<div> </div>
m 댓글 주석 : 댓글로 사용됩니다 (이 방법은 버전 1.2에서 사용할 수 없습니다!)
<!-지침 : Xingoo->
<div> </div>
일반적으로 말하면 속성 및 요소로 사용하는 것이 좋습니다.
기존 HTML 태그에서 속성을 확장하려면 속성 메소드를 사용하십시오.
태그를 사용자 정의하려면 태그 양식을 사용하십시오.
해당 메소드를 사용하려면 정의 지침의 제한에서 해당 문자를 선언해야합니다.
지침의 인라인 사용 :
다른 태그는 태그 내부에 중첩 될 수 있으므로 다른 요소 태그를 사용자 정의 태그로 중첩하려면 다음을 필요로합니다.
1 TransClude 속성을 사용하여 True로 설정하십시오.
2 내부 중첩 위치를 정의하기 위해 NG-TransClude 속성을 사용하십시오.
코드는 다음과 같습니다.
myAppModule.directive ( "test", function () {return {return : 'aecm', translate : true, 템플릿 : "<div> haha! <div ng-transclude> </div> wuwu! </div>"});모든 코드
<! docType html> <html ng-app = "myapp"> <head> <meta http-equiv = "content-type"content = "text /html; charset = utf-8" /> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </head> <xingoo> <xingoo> </xingoo> <div xingoo> </div> <div> </div> <!-xingoo-> <hr <hr <hr> <xingoo> 3333 </xingoo> <hr> <test> 4444 </test> <script type = "text/javaScript"> var myAppModule = Angular.Module ( "myApp", []); myAppModule.directive ( "xingoo", function () {return {reteric : 'aecm', 템플릿 : '<div> 안녕하세요 내 지시문 </div>', 대체 : true}}); myAppModule.directive ( "test", function () {return {return {restrict : 'aecm', transclude : true, template : "<div> haha! <div ng-transclude> </div> wuwu! </div>"}); </script> </body> </html>실행 결과
위의 것은 AngularJS 사용자 정의 지시문을 분류하는 정보입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!