AngularJS와 관련하여, 우리가 가장 먼저 생각하는 것은 아마도 양방향 데이터 바인딩 및 지시 시스템이며, 이는 또한 AngularJS의 가장 매력적인 측면이기도합니다. 양방향 데이터 바인딩에 관해서는 할 말이 없다고 생각합니다. 그래서 오늘 우리는 AngularJS 프레임 워크의 지시 시스템에 대해 간단히 논의 할 것입니다. 나는 또한 초보자이며 몇 가지 정보를 상담했습니다. 나쁜 일이 있다면 Wan Wang은 그것을 지적했습니다.
지시문은 AngularJS의 가장 중요한 부분 이므로이 프레임 워크 자체에는 더 많은 지침이 제공되지만 개발시 이러한 지침은 일반적으로 우리의 요구를 충족시킬 수 없으므로 일부 지침을 사용자 정의해야합니다. 그런 다음 AngularJS 지시문은 HTML 코드에서 네 가지 형태의 표현식을 가질 수 있습니다.
1. 새로운 HTML 요소로 사용하십시오.
<hello> </hello> 또는 <hello/>
2. 요소의 속성으로 사용하십시오
<div hello> </div>
3. 요소 클래스로 사용하십시오
<div> </div>
4. 주석으로 사용하십시오
<!-지침 : 안녕하세요->
여기에는 함정이 있으며, "Directive : Hello"후에 공간이 있어야합니다. 그렇지 않으면 쓸모가 없습니다. 동시에 덜 주석 방법을 사용하는 것이 좋습니다. 고품질을 추구해야한다면 캐주얼하십시오. 지침에는 위의 네 가지 형태의 표현이 있으므로 어떻게 구체적으로 정의합니까?
.Directive ( 'hello', function () {return {제한 : 'aecm', 템플릿 : '<버튼> me </button>'}})위의 것은 지침을 정의하는 가장 간단한 코드입니다. 위 코드에서 Directive () 메소드는 새 명령을 정의합니다. 이 방법에는 두 개의 매개 변수가 있습니다. 첫 번째 'hello'는 명령어 이름이 hello이고 두 번째 매개 변수는 명령어 객체를 반환하는 함수를 지정하는 것입니다. 따라서 위 코드에서 기능은 주로 두 가지 속성을 사용 하여이 hello 지시문을 정의합니다.
1. 제한 [문자열] 속성은 주로 HTML 코드에서 사용할 수있는 표현식을 지정하는 데 사용됩니다. a는 속성을 나타내고, e는 요소를 나타내고, c는 클래스를 나타내고, m은 주석을 나타냅니다. 실제 상황에서는 일반적으로 AE의 두 가지 방법을 사용합니다.
2. 템플릿 [String 또는 function] 속성은 Command에 의해 생성 된 HTML 마크 업이 angular에 의해 컴파일 된 후 명령에 의해 생성됩니다. 이 속성은 내부의 하나의 HTML 텍스트만큼 단순하거나 특히 복잡 할 수 있습니다. 속성의 값이 함수 인 경우 메소드는 템플릿을 나타내는 문자열을 반환하고 표현식 {{}}도 사용할 수 있습니다.
템플릿 : function () {return '<button> me </button>'을 클릭하십시오. }그러나 일반적으로 템플릿 속성은 TemplateUrl로 대체되며 외부 파일 주소를 가리키는 데 사용되므로 일반적으로 템플릿을 외부 HTML 파일에 배치 한 다음 TemplateUrl을 사용하여 가리 킵니다.
지침을 정의 할 때 위의 두 가지 기본 속성 외에도 다른 많은 속성을 사용합니다. 그 자리에 대해 하나씩 이야기 해 봅시다.
1. 우선 순위 [숫자] 속성,이 속성은 사용자 정의 명령의 우선 순위를 지정하는 데 사용됩니다. DOM 요소에 둘 이상의 명령이 있으면 지침의 우선 순위를 비교해야합니다. 우선 순위가 높은 지침이 먼저 실행됩니다. 이 우선 순위는 명령어를 실행하기 전에 컴파일 함수를 정렬하는 데 사용됩니다. 따라서 컴파일 기능에 대해 신중하게 이야기 할 것입니다.
2. Terminal [boolean] 속성,이 매개 변수는이 명령보다 우선 순위가 낮은 현재 요소에 대한 지침을 중지할지 여부를 정의하는 데 사용됩니다. 값이 참이면 정상입니다. 우선 순위로 실행됩니다. False로 설정된 경우이 명령어보다 우선 순위가 낮은 현재 요소에 대한 지침은 실행되지 않습니다.
3. [부울] 속성을 교체하십시오.이 속성은 생성 된 HTML 컨텐츠 가이 지시문을 정의하는 HTML 요소를 대체할지 여부를 지정하는 데 사용됩니다. 이 속성의 값을 True로 설정하면 콘솔을 열고 보면이 명령어로 생성 된 요소가 다음과 같습니다.
거짓으로 설정하면 다음과 같이 보일 것입니다.
.
4. 링크 [function] 속성. 위의 예에서, 우리가 사용자 정의한 명령에는 실제로 많은 의미가 없습니다. 이것은 가장 간단한 명령입니다. 우리가 정의하지 않은 많은 속성이 있으므로 많이 사용하지 않습니다. 예를 들어이 링크 기능에는 범위, 요소 및 attrs의 세 가지 매개 변수가 포함됩니다. 이 링크 기능은 주로 DOM 요소에 이벤트 모니터링을 추가하고 모델 속성 변경 사항을 모니터링하며 DOM을 업데이트하는 데 사용됩니다. 세 가지 매개 변수가 있습니다.
1 : 스코프 매개 변수. 명령에 대한 스코프 속성을 정의하지 않으면 상위 컨트롤러의 범위를 나타냅니다.
2 : 요소 매개 변수는 DOM 요소를 감싸는 명령어의 jqlite (jQuery의 서브 세트)입니다. AngularJS를 소개하기 전에 jQuery를 도입 한 경우이 요소는 jqlite 요소가 아닌 jQuery 요소입니다. 이 요소는 jquery/jqlite에 의해 래핑되었으므로 DOM 작업을 수행 할 때 더 이상 $ ()를 사용하지 않아도됩니다.
3 : 지침이 위치한 요소의 속성의 표준화 된 매개 변수 객체를 포함하는 attrs 매개 변수.
5. 범위 [부울 또는 개체] 속성은 명령의 범위를 정의하는 데 사용됩니다. 기본적으로 거짓입니다. 즉, 명령어는 상위 컨트롤러의 범위를 상속합니다. 상위 컨트롤러의 범위에서 속성을 마음대로 사용할 수 있지만, 이런 식으로는 부모의 범위의 속성을 오염시킬 것입니다. 따라서 SCOPE가 다음 두 가지 값을 취하도록 할 수 있습니다 : True와 {}.
사실 일 때, 그것은 각도가 지시에 대한 상위 범위에서 상속 된 범위를 생성한다는 것을 의미합니다.
var myapp = angular.module ( 'myapp', []) .controller ( 'myctrl', [ '$ scope', function ($ scope) {$ scope.color = 'red';}]) style = "back여기서는 상위 스코프의 색상 속성을 정의하고 빨간색으로 할당합니다. Hello Directive의 범위 속성에서, 우리는 True를 제공하므로 Angular는이 지침의 부모 범위에서 상속 된 범위를 만듭니다. 그런 다음 템플릿 속성에서 {{}}을 사용하여 상위 스코프에서 상속 된 색상 속성을 사용하므로 버튼이 빨간색이됩니다.
{} 일 때, 그것은 분리 된 범위가 생성되고 상위 범위의 속성이 상속되지 않음을 의미합니다. 그러나 때때로 우리는 부모 범위의 속성이나 방법에 액세스해야하므로 어떻게해야합니까? Angular는 우리에게 이것을 오랫동안 생각했습니다. 위의 작업을 기억하는 세 가지 방법이 있습니다.
1 : @를 사용하여 일원 바인딩을 구현하십시오. 이 {} 값만 범위 만 제공하면 위 코드의 버튼의 배경색은 회색입니다. 부모 스코프의 색상 속성을 사용해야하는 경우 다음에 쓸 수 있습니다.
스코프 {색상 : '@color'} <hello color = "{{color}}"> </hello>여기에는 두 가지 점이 있습니다. 1. 스코프의 속성 색상은 {{}} 표현의 색상을 나타내고, 둘은 일관성이 있어야합니다. 2. 스코프의 속성 색상의 값, 즉 @이후의 색상은 아래의 HTML 요소의 속성 색상을 나타내므로 두 개도 일관성이 있어야합니다. 여기의 속성 이름이 템플릿에서 {{}} 표현식에 사용 된 이름과 동일하면 @ 이후의 속성 이름은 다음 형식으로 생략하여 작성할 수 있습니다.
스코프 {색상 : '@'}명령의 범위 값에서, 명령 템플릿의 {{}} 표현식의 색상은 현재 요소 요소의 색상 속성을 가리키며이 색상 속성의 값은 상위 스코프의 속성 색상의 값임을 알 수 있습니다. 상위 스코프는 색상 속성 값을 현재 요소의 색상 속성으로 전달 한 다음 색상 속성은 템플릿의 표현식에서 값을 색상으로 전달합니다. 이 과정은 편도입니다.
2 : 사용 = 양방향 바인딩을 구현합니다
.Directive ( 'hello', function () {return {return {제한 : 'aecm', 교체 : true, template : '<button style = "back elements.css ( 'background-color', 'blue'); $ apply (function () {scope.color = 'pink';})}}}).<hello color = "color"> </hello> <입력 유형 = "text"ng-model = "color"/>
여기에는 습자 범위에서 색상 속성을 바인딩하고 상위 스코프의 색상 속성을 바인딩하고 명령의 링크 함수에 클릭 이벤트를 추가합니다. 버튼을 클릭하면 버튼의 색상이 변경되고 명령 범위의 색상 속성 값을 변경 한 다음 입력 태그를 HTML 페이지에 추가하고 상위 스코프의 색상 속성 값을 출력하거나 입력합니다. 여기에 주목할 곳이 있습니다. 현재 요소의 속성 이름의 값은 {{}} 표현식 {{}} 표현식을 추가 할 필요가 없습니다. 여기서 부모의 스코프는 간단한 문자열이 아닌 실제 범위 데이터 모델을 전달하므로 간단한 문자열, 배열 및 복잡한 개체를 명령 범위로 전달할 수 있습니다. 이제이 버튼을 클릭 할 때 어떻게되는지 살펴 보겠습니다.
여기서 우리는 버튼의 색상이 분홍색으로 변경되었음을 알 수 있습니다. 즉, 클릭이 명령 범위의 색상 속성을 변경하여 버튼의 색상이 변경됩니다. 그러나 여기에 변경된 버튼만이 아닙니다. 입력 양식의 값에주의를 기울이면 분홍색이되었습니다. 이는 상위 스코프의 색상 속성도 변경되었습니다. 또한 입력에 색상을 입력하여 어떤 변화가 발생했는지 확인해 봅시다.
, 형식으로 다른 색상을 입력하면 버튼의 색상도 변경되므로 명령 범위의 색상 속성이 변경되었음을 의미합니다. 요약하면 '='를 사용하는 것이 양방향 바인딩이라는 것을 알 수 있습니다.
3 : 부모 범위에서 메소드를 사용하고 호출하십시오.
var myapp = angular.module ( 'myapp', []) .controller ( 'myctrl', [ '$ scope', function ($ scope) {$ scope.color = 'red'; $ scope.sayHello = function () {alert ( 'hello');};}]). 대체 : true, 템플릿 : '<button ng-click = "sayhello ()"style = "back elements.css ( 'background-color', 'blue'); $ apply (function () {scope.color = 'pink';})}}).<hello color = "color"saysHello = "sayHello ()"> </hello> <input type = "text"ng-model = "color"/>
여기에는 다음과 같은 두 가지가 있습니다. 1. 1. 우리는 템플릿의 NG 클릭 지시문을 사용하여 호출 할 모 메소드의 메소드를 바인딩해야 할뿐만 아니라 현재 요소에 속성을 추가 할 필요가 있으며,이 속성은 상위 스코프의 메소드를 가리 킵니다. 2. 명령 범위 속성 3 가지 hello, 현재 요소 속성은 말하며, 템플릿을 바인딩하는 이벤트 메소드 이름은 일관성이 있어야합니다. 그런 다음 버튼을 클릭하면 대화 상자가 나타납니다.
6. transclude [boolean] 속성,이 속성은 지침에 컨텐츠를 포함 할 수 있는지 여부를 지정할 수 있도록 사용됩니다.
.Directive ( 'hello', function () {return {return {제한 : 'aecm', 교체 : true, transclude : true, scope : {}, 템플릿 : '<div ng-transclude> </div>',}}). <hello> hello <span> {{color}} </span> </hello>값이 참이면 페이지의 값 출력입니다. 거짓이되면 페이지가 비워집니다. 여기에주의를 기울일 곳이 있습니다. <span> {{color}} </span>입니다. 여기의 색상은 상위 범위의 색상입니다. 지침에서 범위의 색상 속성이 아닙니다.
7. 컴파일 [function] 매개 변수. 이 방법에는 두 가지 매개 변수 요소 인 attrs가 있습니다. 첫 번째 파라미터 요소는 명령어가 위치한 요소를 나타내고, 두 번째 atts는 요소에 할당 된 표준화 된 매개 변수 목록을 나타냅니다. 여기에도 주목할 장소도 있습니다. 컴파일 함수는 범위에 액세스 할 수 없으며 링크 함수를 반환해야합니다. 그러나 컴파일 함수가 설정되지 않으면 링크 함수를 정상적으로 구성 할 수 있습니다 (Compile에서는 링크를 사용할 수 없으면 링크 함수는 컴파일로 반환됩니다).
.Directive ( 'hello', function () {return {retrict : 'aecm', replace : true : true, trunge : true, template : '<button ng-click = "sayhello ()"style = "back (스코프, 요소, attrs) {elements.bind ( 'click', function () {elements.css ( 'background-color', 'blue'); scope. $ apply (scope.color = 'pink';})});이제이 버튼을 클릭합시다
여기서 버튼을 클릭 한 후 발생한 일은 이전에 링크 속성을 사용한 것과 동일하며 실제로 큰 차이가 없습니다.
실제로 대부분의 경우 링크 함수 만 사용하면됩니다. 대부분의 지침은 링크 함수에서 수행 할 수있는 이벤트 청취, 모니터링 모델 및 업데이트를 고려하면됩니다. 그러나 NG- 반복과 같은 지침의 경우 DOM 요소를 여러 번 클로닝하고 반복해야하며 링크 함수가 실행되기 전에 컴파일 기능이 수행됩니다. 그렇다면 왜 생성 프로세스를 완료하기 위해 두 가지 별도의 기능이 필요한가? 이 질문에 잘 대답하기 위해서는 지침이 어떻게 각도로 편집되는지 이해해야합니다!
8. 지침은 어떻게 편집됩니까?
Angular Application Boot가 시작되면 Angular는 $ Compile 서비스를 사용하여 DOM 요소를 통과합니다. 모든 지침이 인식되면 명령의 컴파일 메소드가 호출되고 링크 함수가 반환되고 링크 함수가 나중에 실행되는 링크 함수 목록에 추가됩니다. 이 프로세스를 컴파일 단계라고합니다. NG-Repeat와 같은 지침은 여러 번 반복되고 복제되어야합니다. 컴파일 함수는 컴파일 단계에서 한 번만 실행되며 이러한 템플릿은 복사되지만 링크 함수는 각 복사 된 인스턴스에 대해 실행됩니다. 그래서 우리는 우리의 성과를 향상시키기 위해 별도로 처리 할 수 있습니다 (이 문장은 약간 비현실적이며 다른 장소에서 복사했습니다.
9. 컨트롤러 [String 또는 function] 및 [String 또는 String []] 매개 변수가 필요합니다. 다른 지침이 귀하의 지침과 상호 작용하도록 허용하려면 컨트롤러 기능을 사용해야합니다. 다른 지침이 상호 작용하려면 지침의 컨트롤러 인스턴스에 대한 참조를 선언해야합니다.
.Directive ( 'hello', function () {return {scope : {}, 요구 : '^he', compile : compile : function (element, attrs) {return function (범위, 요소, attrs, cntins) {cntins.fn ()};}}})).}, return {retonc : ($ scope, $ compile, $ http) {this.fn = function ( 'hello');<He> <hello color = "color"saysHello = "sayHello ()"> </hello> </he>
페이지가로드되면 대화 상자가 나타납니다.
글쎄, 위는이 기간 동안 내가 배운 지시에 대해 배운 것입니다. 이 글을 쓰자.
AngularJS의 지침에 대한 위의 포괄적 인 분석 (읽어야 함)은 내가 공유하는 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.