지시 사항을 위해서는 특정 DOM 요소에서 실행되는 기능으로 간단히 이해할 수 있으며 지침은이 요소의 기능을 확장 할 수 있습니다.
먼저, 완전한 매개 변수 예제를 살펴본 다음 각 매개 변수의 기능과 사용법을 자세히 소개하겠습니다.
Angular.Module ( 'myApp', []). directive ( 'myDirective', function () {return {return {return {retrict : string, 우선 순위 : 숫자, 템플릿 : 문자열 또는 템플릿 함수 : 함수 (Telement, Tattrs) {...}, templateurl : string, scope : boolean 또는 string : boolean, boolean, boolean : boolean : boolean : boolean : boolean 또는 객체 함수 (스코프, 요소, attrs, transclude, 기타 인젝션) {...}, 컨트롤러 : 문자열, 요구 사항 : 문자열, 링크 : 함수 (스코프, IELENT, IATTRS) {...}, compile : // 객체 또는 연결 함수를 반환합니다. POST : 함수 (범위, IELEMENT, IATTRS, 컨트롤러) {...}} return function postLink (...) {...}}};[String] 제한
제한은 선택적 매개 변수입니다. DOM에서 선언 된 명령어 형태로 지정하는 데 사용됩니다. 기본값은 A입니다. 즉, 속성 형태로 선언됩니다.
선택적 값은 다음과 같습니다.
e (요소)
<my-directive> </my-directive>
A (속성, 기본값)
<div my-directive = "expression"> </div>
C (클래스 이름)
<div> </div>
m (주)
<-지침 : 내 지시적 표현->
일반적으로 브라우저의 호환성을 고려하면 기본 속성을 속성 형태로 즉시 선언하는 것이 좋습니다. 마지막 방법은 필요하지 않은 경우 적격 지수를 사용하지 않는 것이 좋습니다.
암호:
Angular.Module ( 'app', []). directive ( 'myDirective', function () {return {retrict : 'e', 템플릿 : '<a href = "http://www.baidu.com"> baidu </a>'};}) htmlcode : <my-directive>효과:
우선 순위 [int]
대부분의 지침은이 매개 변수를 무시하고 기본값 0을 사용하지만 일부 시나리오는 우선 순위가 높거나 우선 순위를 설정하는 데 매우 중요하거나 심지어 필요합니다. 예를 들어, NGREPEAT는이 매개 변수를 1000으로 설정하여 동일한 요소에서 항상 다른 지침보다 호출되도록 할 수 있습니다.
터미널 [bool]
이 매개 변수는이 명령어보다 우선 순위가 낮은 현재 요소에서 지침 실행을 중지하는 데 사용됩니다. 그러나 현재 명령과 동일한 우선 순위를 가진 지침은 여전히 실행됩니다.
예를 들어, NGIF는 NGView보다 우선 순위가 약간 높습니다 (실제로 터미널 매개 변수). NGIF의 표현 값이 참이면, NGVIEW를 정상적으로 실행할 수 있지만, NGIF 표현식의 값이 False 인 경우 NGView의 우선 순위가 낮기 때문에 NGVIEW가 실행되지 않습니다.
템플릿 [문자열 또는 함수]
템플릿 매개 변수는 선택 사항이며 다음 두 가지 양식 중 하나로 설정해야합니다.
HTML 텍스트 조각;
두 매개 변수를 수용 할 수있는 함수, 매개 변수는 Telement 및 Tattrs이며 템플릿을 나타내는 문자열을 반환합니다. T Telement 및 Tattrs의 T는 템플릿을 나타냅니다.
먼저 두 번째 사용법을 보여 드리겠습니다.
Angular.module ( 'app', []). directive ( 'myDirective', function () {return {return {reteric : 'eac', 템플릿 : function (lem, att) {return "<a href = '" + attr.value + "'>" + attr.text + "</a>";}})htmlcode : (효과는 위와 동일하며, 데모는 없을 것입니다)
<my-directive value = "http://www.baidu.com"text = "baidu"> </my-directive> <div my-directive value = "http://www.baidu.com"text = "baidu"> </div>
templateUrl [문자열 또는 함수]
TemplateUrl은 선택적 매개 변수이며 다음 유형 일 수 있습니다.
외부 HTML 파일의 경로를 나타내는 문자열;
두 매개 변수를 수용 할 수있는 함수, 매개 변수는 Telement 및 Tattrs이며 외부 HTML 파일의 경로로 문자열을 반환합니다.
어느 쪽이든, 템플릿의 URL은 NG의 내장 보안 계층, 특히 $ gettrustedresourceurl을 통해 전달되며, 이는 신뢰할 수없는 소스에 의해 템플릿이로드되는 것을 방지합니다. 기본적으로 지시문을 호출 할 때 HTML 템플릿 파일은 백그라운드에서 AJAX를 통해 요청됩니다. 많은 수의 템플릿을로드하면 클라이언트 응용 프로그램이 심각하게 느려집니다. 대기 시간을 피하기 위해 응용 프로그램을 배포하기 전에 HTML 템플릿을 캐시 할 수 있습니다.
암호:
Angular.Module ( 'app', []) .Directive ( 'myDirective', function () {return {return {restrict : 'aec', templateUrl : function (elem, attr) {return attr.value + ".html"; // 여기서 경로를 직접 지정할 수 있으며 템플릿에 표현식이 포함될 수 있습니다.[bool] 교체
대체는 선택적 매개 변수입니다. 이 매개 변수가 설정되면 기본값이 False이므로 값이 true 여야합니다. 기본값은 템플릿 이이 지시문을 자식 요소로 부르는 요소에 삽입 함을 의미합니다.
예를 들어, 위의 예제의 기본값 하에서 생성 된 HTML 코드는 다음과 같습니다.
<my-directive value = "http://www.baidu.com"text = "baidu"> <a href = "http://www.baidu.com"> baidu </a> </my-directive>
대체 = true가 설정된 경우
<a href = "http://www.baidu.com"value = "http://www.baidu.com"text = "baidu"> baidu </a>
내 관찰에 따르면,이 효과는 제한 = "e"일 때만 실제 효과를 보일 것입니다.
기본 명령 매개 변수를 도입 한 후 더 중요한 범위 매개 변수가 포함됩니다 ...
범위 매개 변수 [bool 또는 객체]
스코프 매개 변수는 선택 사항이며 true 또는 객체로 설정할 수 있습니다. 기본값은 False입니다.
요소에 대한 여러 지시문이 격리 범위를 사용하는 경우 그 중 하나만 적용 할 수 있습니다. 지침 템플릿의 루트 요소 만 새로운 범위를 얻을 수 있습니다. 따라서 이러한 객체에 대해 기본적으로 범위가 true로 설정됩니다. 내장 지시문 NG-Controller의 기능은 부모의 범위에서 상속하고 새로운 아동 범위를 만드는 것입니다. 부모의 범위에서 상속 된 새로운 아동 범위를 만듭니다. 여기의 상속은 자세히 설명되지 않으며 기본적으로 객체 지향의 상속과 동일합니다.
먼저 코드를 분석하겠습니다.
<div ng-app = "app"ng-init = "name = 'name ='할아버지 '" "> <div ng-init ="name ='아버지 ' "> 1 세대 : {{name}} <div ng-init ="name ='son ' "ng-controller ="somecontroller "> 2 세대 : {name}} <name}> 이름}} </div> </div> </div> </div> </div> </div>우리는 1 세대, 우리는 이름을 아버지로 초기화하지만, 2 세대와 3 세대는 실제로 같은 범위이므로 그들의 이름은 실제로 대상이므로 이것의 효과는 다음과 같습니다.
1 세대 : 아버지
2 세대 : 손자
3 세대 : 손자
우리는 3 세대를 격리하기 위해 코드를 수정 한 다음 효과를 확인합니다.
<div ng-app = "app"ng-init = "name = '할아버지'"> <div ng-init = "name = 'africt'"> 첫 번째 세대 : {{name}} <div ng-init = "name = 'son'"ng-controller = "somecontroller"> 2 세대 : {name}} <name} <grandson ' " ng-controller = "SecondController"> 3 세대 : {{name}} </div> </div> </div> </div> </div> </div> Angular.Module ( 'app', []) .controller ( 'somecontroller', function ($ scope) {}) .controller ( 'SecondController', function ($ scope) {})효과는 다음과 같습니다.
1 세대 : 아버지
2 세대 : 아들
3 세대 : 손자
코드를 수정 한 후 상속을 살펴 보겠습니다.
<div ng-app = "app"ng-init = "name = 'name ='할아버지 '"> <div> 1 세대 : {{name}} <div ng-controller = "somecontroller"> 2 세대 : {{name}} <div ng-controller = "secondtroller"> 3 세대 : {name}} </div> </div>} </div> </div>효과는 다음과 같습니다.
1 세대 : 할아버지의 키스
2 세대 : 할아버지의 키스
3 세대 : 할아버지의 키스
외부 프로토 타입에서 스코프를 상속하고 스코프 속성을 True로 설정할 수있는 지침을 만들려면 단순히 상속 가능한 격리입니다. 즉, 부모의 범위에 반대에 영향을 줄 수는 없습니다.
다른 예를 살펴 보겠습니다.
Angular.Module ( 'myApp', []) .controller ( 'mainController', function ($ scope) {}) .Directive ( 'myDirective', function () {return {retrict : 'a', scope : // {{div> 내부 : '<div> 내부 : {myPreperty}}} ng-model = "myproperty"/> </div> '};HTML 코드 :
<div ng-controller = 'maincontroller'ng-init = "myProperty = 'Hello World!'"> 외부 : {{myProperty}} <입력 ng-model = "myProperty"/> <div my-dipertic> </div> </div>범위 값을 변경하면 찾을 수 있습니다
거짓 : 상속하지만 분리되지는 않습니다
사실 : 상속 및 분리
{} : 분리되어 상속되지 않았습니다
트랜스 클럽
transclude는 선택적 매개 변수입니다. 기본값은 False입니다. 임베딩은 종종 재사용 가능한 구성 요소를 만드는 데 사용되며 일반적인 예는 모달 대화 상자 또는 탐색 표시 줄입니다. 우리는 지침을 포함하여 전체 템플릿을 임베드하여 하나의 지시 사항으로 전달할 수 있습니다. 지침 내부는 외부 지침의 범위에 액세스 할 수 있으며 템플릿은 외부 스코프 객체에도 액세스 할 수 있습니다. 스코프를 전달하려면 스코프 매개 변수의 값을 {} 또는 true만큼 스코프로 분리하도록 설정해야합니다. 스코프 매개 변수가 설정되지 않으면 지침 내부의 범위가 들어오는 템플릿의 범위로 설정됩니다.
TransClude 사용 : 컨텐츠를 포함 할 수있는 지침을 작성하려는 경우에만 true.
두 가지 예를 살펴 보겠습니다 - 내비게이션 바 :
<div 사이드 박스> <div> <a href = ""> 그래픽 </a> <a href = ""> ng </a> <a href = ""> d3 </a> <a href = ""> 프론트 엔드 </a> <a href = ""> startup </a> </div>
Jscode :
Angular.Module ( 'myApp', []). directive ( 'sidebox', function () {return {return {restrict : 'ea', scope : {title : '@'}, true : '<div> <div> <h2>' + '{{{{{div> <div> <h2>이 코드는 NG 컴파일러가 NG 트랜스 클루 드 지시문을 발견하는 DOM 요소에서 얻는 것을 넣도록 지시합니다.
공식 웹 사이트의 예를 살펴 보겠습니다.
Angular.Module ( 'docSisofnbindexample', []) .controller ( '컨트롤러', [ '$ scope', '$ timeout', function ($ scope, $ timeout) {$ scope.name = 'tobias'; $ scope.hidedialog = function () {$ scope.dialogishidden = true (function) () false}, 2000);my-dialog-close.html
my-dialog-close.html <div> <a href ng-click = "close ()"> x </a> <div ng-transclude> </div> </div>
index.html
<div ng-controller = "컨트롤러"> <my-dialog ng-hide = "dialogishidden"on-close = "hidedialog ()"> 내용을 확인하십시오, {{name}}! </my-dialog> </div>명령어가 TransClude 매개 변수를 사용하는 경우 컨트롤러는 데이터 모델의 변경 사항을 정상적으로 모니터링 할 수 없습니다. 링크 함수에서 $ watch 서비스를 사용하는 것이 좋습니다.
컨트롤러 [문자열 또는 함수]
컨트롤러 매개 변수는 문자열 또는 함수 일 수 있습니다. 문자열로 설정하면 응용 프로그램에 등록 된 컨트롤러의 생성자가 문자열의 값으로 이름으로 찾을 수 있습니다.
Angular.module ( 'myapp', []). directive ( 'mydirective', function () {제한 : 'a', 컨트롤러 : 'somecontroller'})인라인 컨트롤러는 명령 내부의 익명 생성자를 통해 정의 할 수 있습니다.
Angular.Module ( 'myApp', []). directive ( 'myDirective', function () {제한 : 'a', 컨트롤러 : 함수 ($ scope, $ element, $ attrs, $ transclude) {// 컨트롤러 로직이 여기에 배치됩니다}});컨트롤러에 주입 할 수있는 NG 서비스를 주입 할 수 있으며 지침에 사용할 수 있습니다. 컨트롤러에는 지침에 주입 할 수있는 특별한 서비스도 있습니다. 이러한 서비스에는 다음이 포함됩니다.
1. $ 범위
지침 요소와 관련된 현재 범위.
2. $ 요소
현재 명령에 해당하는 요소.
3. $ attrs
현재 요소의 속성으로 구성된 객체.
<div id = "adiv"class = "box"> </div> 다음 속성 객체가 있습니다. {id : "adiv", class : "box"}4. $ transclude
임베드 링크 함수는 해당 임베딩 스코프와 비슷합니다. TransClude Link 함수는 실제로 클론 요소에 실행되고 DOM을 작동하는 기능입니다.
Angular.Module ( 'myApp', []). directive ( 'myLink', function () {return {return {return {extrict : 'ea', transclude : true, controller : function ($ scope, $ element, $ attrs, $ transclude) {$ transclude (function (clone) {var a = angular.lement ( 'href'); a.text (clone.text); }) ;;HTML
<my-link value = "http://www.baidu.com"> baidu </my-link>
<div my-link value = "http://www.google.com"> Google </div>
Compile 매개 변수에서만 transcludefn을 사용하는 것이 좋습니다. 링크 함수는 서로 지시 사항을 분리 할 수 있지만 컨트롤러는 재사용 가능한 동작을 정의합니다. 현재 명령의 API를 다른 명령어에 노출하려면 컨트롤러 매개 변수를 사용할 수 있습니다. 그렇지 않으면 링크를 사용하여 현재 명령 요소 (예 : 내부 함수)의 기능을 구성 할 수 있습니다. SCOPE. $ watch ()를 사용하거나 DOM 요소와 실시간으로 상호 작용하려면 링크를 사용하는 것이 더 나은 선택이됩니다. 임베딩을 사용하면 컨트롤러의 범위에 의해 반영된 범위가 우리가 예상 한 것과 다를 수 있습니다. 이 경우 $ SCOPE 객체를 정상적으로 업데이트 할 수 없습니다. 현재 화면의 범위와 상호 작용하려면 링크 함수로 전달 된 스코프 매개 변수를 사용할 수 있습니다.
ControlLeras [String]
Controlleras 매개 변수는 컨트롤러의 별칭을 설정하여 컨트롤러를 $ 스코프를 주입하지 않고도 참조 할 수 있도록 사용됩니다.
<div ng-controller = "main as main"> <input type = "text"ng-model = "main.name"/> <span> {{main.name}} </span> </div>Jscode :
Angular.Module ( 'myApp', []) .controller ( 'mainController', function () {this.name = "Halower";});컨트롤러의 별칭을 사용하면 라우팅 및 지침이 익명 컨트롤러를 생성 할 수 있습니다. 이 능력은 컨트롤러에 동적 객체를 생성 할 수 있으며 객체가 분리되어 테스트하기 쉽습니다.
[string 또는 string []]이 필요합니다.
요구 사항은 다른 명령의 이름을 나타내는 문자열입니다. 요구 사항은 컨트롤러를 지시하는 명령어에 주입하고 현재 명령어의 링크 기능의 네 번째 매개 변수 역할을합니다. 문자열 또는 배열 요소의 값은 현재 명령어의 범위에서 사용되는 명령어 이름입니다. 어쨌든 NG 컴파일러는 하위 제어기를 찾을 때 현재 명령어의 템플릿을 참조합니다.
컴파일 【객체 또는 기능】
컴파일 옵션 자체는 자주 사용되지 않지만 링크 함수는 자주 사용됩니다. 기본적으로 링크 옵션을 설정하면 실제로 compile () 함수가 링크 함수를 정의 할 수 있도록 postlink () 링크 함수를 만듭니다. 일반적으로 컴파일 함수가 설정되면 지침 및 실시간 데이터를 DOM에 넣기 전에 DOM 작업을 수행하려고합니다. 이 기능에서 노드 추가 및 삭제와 같은 DOM 작업을 수행하는 것이 안전합니다.
컴파일 및 링크 옵션은 상호 배타적입니다. 이 두 옵션이 동시에 설정되면 Compile에 의해 반환 된 함수는 링크 함수로 간주되며 링크 옵션 자체는 무시됩니다.
컴파일 된 함수는 템플릿 Dom을 변환하는 역할을합니다. 링크 함수는 범위와 DOM을 연결하는 역할을합니다. DOM은 범위가 DOM에 연결되기 전에 수동으로 작동 할 수 있습니다. 실제로, 이런 종류의 작업은 사용자 정의 지침을 작성할 때 매우 드물지만 이러한 기능을 제공하는 몇 가지 내장 지침이 있습니다.
링크
컴파일 : 함수 (tele, tattrs, translatefn) {// todo : return function (scope, ele, attrs) {// link function};링크 함수는 선택 사항입니다. 컴파일 된 함수가 정의되면 연결된 함수를 반환하므로 두 함수가 정의되면 컴파일 된 함수는 링크 된 함수를 과부하시킵니다. 지침이 간단하고 추가 설정이 필요하지 않은 경우 객체를 교체하기 위해 공장 함수 (콜백 함수)에서 함수를 반환 할 수 있습니다. 이 작업이 완료되면이 기능은 링크 함수입니다.
ngmodel
컨트롤러에서 데이터를 처리하기 위해보다 기본적인 API를 제공합니다. 이 API는 데이터 바인딩, 검증, CSS 업데이트 및 실제로 DOM을 작동하지 않는 기타 사항을 처리하는 데 사용됩니다. NGModel 컨트롤러는 일부 방법을 포함하는 NGModel과 함께 지침에 주입됩니다. NGModelController에 액세스하려면 필요한 설정을 사용해야합니다.
NGModelController에서 사용하는 공통 요소는 다음과 같습니다.
1. 스코프에서 뷰 값을 설정하려면 ngmodel. $ setViewValue () 함수를 호출해야합니다.
$ setViewValue () 메소드는 사용자 정의 지시문에서 사용자 정의 이벤트를 듣는 데 적합하며 (예 : 콜백 기능이있는 jQuery 플러그인 사용), 콜백이 호출 될 때 $ viewValue를 설정하고 Digest 루프를 실행하려고합니다.
Angular.Module ( 'myApp') .Directive ( 'myDirective', function (), function () {return {return {return : '? ngmodel', link : function (scope, ele, attrs, ngmodel) {if (! ngmodel) return; $ (function () {ele.datepicker (function () {// clack function and rectect and conce 스코프. }}; }); }}; }); }; }); }; }); }; }); }; }); }; }); }; }); }; }); }; }); }; });2. $ 렌더 메소드는보기의 특정 렌더링 메소드를 정의 할 수 있습니다.
3. 속성
1. $ viewValue
$ viewValue 속성은보기를 업데이트하는 데 필요한 실제 문자열을 보유합니다.
2. $ modelValue
$ modelValue는 데이터 모델에 의해 유지됩니다. $ parser 파이프 라인이 작동하는지 여부에 따라 $ modelValue 및 $ viewValue가 다를 수 있습니다.
3. $ parsers
$ parsers의 값은 함수 배열이며, 여기서 함수는 파이프 라인 형태로 하나씩 호출됩니다. ngmodel dom에서 읽은 값은 $ parsers의 함수로 전달되며 구문 분석기에 의해 순서대로 처리됩니다.
4. $ 포맷터
$ Formatters의 값은 데이터 모델의 값이 변경 될 때 파이프 라인 형태로 하나씩 호출되는 함수 배열입니다. $ parser 파이프 라인에는 영향을 미치지 않으며이 값 바운드를 사용하여 컨트롤로 값을 표시하고 변환하는 데 사용됩니다.
5. $ ViewChangelisteners
$ viewchangelisteners의 값은보기의 값이 변경 될 때 파이프 라인 형태로 하나씩 호출되는 함수 배열입니다. $ viewchangelisteners를 사용하면 $ watch를 사용하지 않고도 비슷한 동작을 달성 할 수 있습니다. 반환 값이 무시되므로 이러한 함수는 값을 반환 할 필요가 없습니다.
6. $ 오류
$ 오류 객체는 확인 및 해당 오류 정보를 전달하지 않은 유효성 검사 이름을 보유합니다.
7. $ ristine
$ ristine의 값은 부울으로, 사용자가 컨트롤을 수정했는지 여부를 알려줄 수 있습니다.
8. $ 더러운
$ dirty의 값은 $ ristine의 반대이며, 이는 사용자가 컨트롤과 상호 작용했는지 여부를 알 수 있습니다.
9. $ 유효합니다
$ 유효한 값은 현재 제어에 오류가 있는지 여부를 알려줍니다. 오류가있을 때 값은 False이며 오류가 없으면 값이 참입니다.
10. $ 유효하지 않습니다
무효 값은 현재 제어에 하나 이상의 오류가 있는지 여부를 알려주고 그 값은 $ 유효한 반대입니다.
위의 것은 AngularJS에 대한 지침 및 지식 자료의 편집입니다. 우리는 나중에 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!