이 튜토리얼은 AngularJS 버전을 사용합니다. 1.5.3
Angularjs github : https://github.com/angular/angular.js/
Angularjs 다운로드 주소 : https://angularjs.org/
초록 : 지침 (지침) 저자는 그것이 Angularj의 매우 강력하고 유용한 기능 중 하나라고 생각합니다. 그것은 우리에게 공개 커스텀 Dom 요소 또는 클래스 속성 또는 attr 속성을 작성하는 것과 같습니다. 단지 스코프를 조작하고, 이벤트를 바인딩하고, 스타일을 변경하는 등을 기준으로 할 수도 있습니다. 이 지침을 통해 페이징 지침, 자동 완료 지침 등과 같은 많은 공개 지침을 캡슐화 할 수 있습니다. 그런 다음 많은 강력한 기능을 달성하기 위해 HTML 페이지에 한 줄의 코드를 작성하면됩니다. 일반적으로, 지침은 다음과 같은 시나리오를 갖기 위해 사용되어야합니다.
1. HTML을 더 의미 론적으로 만들면 페이지의 일반적인 논리를 알기 위해 코드와 논리를 깊이 연구 할 필요가 없습니다.
2. 사용자 정의 구성 요소를 추상화하고 다른 곳에서 재사용하십시오.
1. 지침의 정의 및 사용법의 정의
AngularJS 지침 정의는 대략 다음과 같습니다
Angular.Module ( "App", []). Directive ( "DirectivenAMe", function () {return {// Seting in Items};})지침은 요소 이름, 속성, 클래스 및 주석으로 배치 할 수 있습니다. 다음은 Mydir, 지침을 인용하는 동등한 방법입니다. (그러나 많은 지침은 "속성"의 사용으로 제한됩니다)
<span <span style = "font-family : arial, helvetica, sans-serif;"> directive-name </span </span <span style = "font-family : arial, helvetica, sans-serif;"> = "exp"> </span> // properties </span> <span style = "font-family : arial, helvetica, sans-serif; "> directive-name </span >> </<span style ="font-family : arial, helvetica, sans-serif; "> directive-name >> </<span style ="font-family : arial, helvetica, sans-serif; "> directive-name >> </<스팬 스타일 = famony. sans-serif; "> directive-name </span </span >> // element <!-지침 : <span style ="font-family : arial, helvetica, sans-serif; "> directive-name </span> <span style ="font-family : arial, helvetica, sans-serif; "> exp-> notes>
다음 예제 :
<! docType html> <html lang = "zh"ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> angularjs에 대한 소개 </title> <script type = "text/javaScript"src = "./ 1.5.3/angular.min.js"> </head> </script> </script> <hello-world> </hello-world> </body> <script type = "text/javaScript"> var app = Angular.Module ( 'myApp', []); app.directive ( 'helloworld', function () {return {retist : 'e', 템플릿 : '<div> hi 나는 lin bingwen ~~~ </div>', 교체 : true};}); </script> </html>결과:
아래는 지침 세부 버전입니다
var myModule = Angular.Module (...); myModule.Directive ( 'DirectivenAMe', 기능 공장 (주입자) {var DirectivedEfinitionObject = {우선 순위 : 0, 템플릿 : '<div> </div>', templateUrl : 'divistive.html', 교체 : false, transclude : false, 'a', 'scope : false, compile : function, transtrs, transtrs. PRELINK (SCOPE, IELEMENT, IATTRS, 컨트롤러) {...}, PostLink (SCOPE, IELEMENT, IATTRS, CONTROLER) {...}}} : 함수 PostLink (SCOPE, IELENT, IATTRS) {...}};2. 지침 명령 내용의 해석
8 개의 내용이 있음을 알 수 있습니다
1. 재시성
(문자열) 선택적 매개 변수는 DOM에서 선언 된 명령의 형태를 나타냅니다. 값은 다음과 같습니다. 물론 EA와 같은 두 가지를 함께 사용할 수 있습니다. 표현은 요소 또는 속성 일 수 있습니다.
[html] 내 코드 조각에서 파생 된 코드의 일반 복사보기 코드 조각보기
e (요소) : <Directivename> </directivename>
a (속성) : <div directivename = 'expression'> </div>
C (클래스) : <div class = 'directivename'> </div>
m (참고) : <-지시 : Directivename 표현식->
일반적으로 E/A/C는 더 자주 사용됩니다.
2. 우선성
(번호), 선택적 매개 변수는 명령의 우선 순위를 지정합니다. 단일 DOM에 여러 지시 사항이있는 경우 우선 순위가 높을 수 있습니다.
3. 터미널
(부울), 선택적 매개 변수는 true 또는 false로 설정할 수 있습니다. True로 설정되면이 명령어보다 우선 순위가 낮은 다른 지침은 유효하지 않으며 호출되지 않습니다 (동일한 우선 순위를 가진 사람은 여전히 실행됩니다).
4. Template (문자열 또는 함수) 선택된 매개 변수는 다음과 같습니다.
(1) HTML 텍스트 조각
<! docType html> <html lang = "zh"ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> angularjs에 대한 소개 </title> <script type = "text/javaScript"src = "./ 1.5.3/angular.min.js"> </head> </script> </script> <hello-world> </hello-world> </body> <script type = "text/javaScript"> var app = Angular.Module ( 'myApp', []); app.directive ( 'helloworld', function () {return {retist : 'e', 템플릿 : '<div> <h1> 안녕 나는 lin bingwen ~~~ </h1> </div>', 교체 : true};}); </script> </html>(2) 함수는 두 개의 매개 변수를 허용 할 수 있습니다.
여기서 Telement는이 지침을 사용하는 요소를 말하고 Tattrs는 인스턴스의 속성이며, 이는 다음과 같은 요소의 모든 속성으로 구성된 컬렉션 (개체)입니다.
<Hello-World2 title = '나는 두 번째 지침입니다'> </hello-world2>
제목은 문신의 속성입니다
템플릿이 함수 일 때 어떤 일이 일어나는지 보자
<! docType html> <html lang = "zh"ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> angularjs에 대한 소개 </title> <script type = "text/javaScript"src = "./ 1.5.3/angular.min.js"> </head> </script> </script> <hello-world> </hello-world> <hello-world2 title = '나는 두 번째 지침'> </hello-world2> </body> <script type = "text/javaScript"> var app = angular.module ( 'myApp', []); app.directive ( 'helloworld', function () {return {retist : 'e', 템플릿 : '<div> <h1> 안녕 나는 lin bingwen ~~~ </h1> </div>', 교체 : true};}); app.directive ( "helloworld2", function () {return {retist {earc ', 템플릿 : function (telement, tattrs) {var _html =' '; </script> </html>결과:
Hello-World2의 태그의 제목 필드도 지침에도 사용됨을 알 수 있습니다.
5. templateUrl (String 또는 function), 선택적 매개 변수 일 수 있습니다
(1) HTML 파일의 경로를 나타내는 문자열
(2) 함수는 두 개의 매개 변수 Telement와 Tattrs를 허용 할 수 있습니다 (위와 거의 동일).
참고 : 로컬 개발 중에 서버를 실행해야합니다. 그렇지 않으면 TemplateUrl을 사용하면 CORS (Cross Origin Request Script) 오류가 발생합니다. HTML 템플릿을로드하면 비동기로로드되므로 많은 템플릿을로드하면 웹 사이트가 느려집니다. 다음은 템플릿을 먼저 캐시하는 트릭입니다.
인덱스 페이지를로드하고 페이지의 일부로 다음 코드를 포함시킬 수 있습니다.
<script type = 'text/ng-template'id = 'hello.html'> <div> <h1> 안녕하세요 나는 린 빙웬 ~~~ </h1> </div> </script>입니다
여기의 ID 속성은 TemplateUrl에 설정됩니다.
<! docType html> <html lang = "zh"ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> angularjs에 대한 소개 </title> <script type = "text/javaScript"src = "./ 1.5.3/angular.min.js"> </head> </script> </script> <hello-world> </hello-world> </body> <script type = "text/javaScript"> var app = Angular.Module ( 'myApp', []); app.directive ( 'helloorld', function () {return {restrict : 'e', templateUrl : 'hello.html', replace : true};}); </script> <script type = 'text/ng-template'id = 'hello.html'> <div> <h1> 안녕하세요 나는 lin bingwen ~~~ </h1> </div> </script> </html>출력 결과 :
캐시의 또 다른 방법은 다음과 같습니다.
app.run ([ "$ templatecache", function ($ templatecache) {$ templatecache.put ( "hello.html", "<div> <h1> 안녕하세요 I am lin bingwen ~~~ </h1> </div>");}];사용의 예는 다음과 같습니다.
<! docType html> <html lang = "zh"ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> angularjs에 대한 소개 </title> <script type = "text/javaScript"src = "./ 1.5.3/angular.min.js"> </head> </script> </script> <hello-world> </hello-world> </body> <script type = "text/javaScript"> var app = Angular.Module ( 'myApp', []); app.directive ( 'helloorld', function () {return {restrict : 'e', templateUrl : 'hello.html', replace : true};}); app.run ([ "$ templatecache", function ($ templatecache) {$ templatecache.put ( "hello.html", "<div> <h1> 안녕하세요 I am lin bingwen ~~~ </h1> </div>");}]; </script> </html>결과:
실제로 첫 번째 방법은 더 좋고 글을 쓰는 것이 더 빠릅니다. 저자는 SCPRIT에 직접 포함 된 가장 많이 작성해야 할 첫 번째 방법을 가지고 있습니다.
6. 다시 시작하십시오
(부울 값), 기본값은 False입니다. true로 설정되면 다음 예제를 살펴 보겠습니다 (템플릿에 주어진 예제 비교).
대체가 참이면 Hello-World 태그가 더 이상 존재하지 않으며 그렇지 않으면 존재합니다.
7. 스코프
(1) 기본값은 False입니다. 부모 범위의 상속을 나타냅니다.
(2) 사실. 부모의 범위를 상속하고 자신만의 범위를 생성 함을 나타냅니다 (자식 범위).
(3) {}. 완전히 새로운 격리 범위를 생성 함을 나타냅니다.
7.1 먼저, 범위의 상속 메커니즘을 이해해 봅시다. NG-Controller 명령을 예로 사용합시다.
<! docType html> <html lang = "zh"ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> angularjs에 대한 소개 </title> <script type = "text/javaScript"src = ". ng-controller = 'maincontroller'> 아버지 : {{name}} <input ng-model = "name"/> <div my-directive> </div> </div> </body> <script type = "text/javaScript"> var app = angular.module ( 'myapp', []); app.controller ( 'maincontroller', function ($ scope) {$ scope.name = 'lin bingwen';}); app.directive ( 'mydirective', function () {return {retrict : 'ea', scope : false, template : '<div> son : {{name}} <input ng-model = "name"/> </div>'};}); </script> </html>다음으로 간단하고 명확한 예제를 사용하여 범위 값의 차이점을 설명합니다.
범위 : 거짓
범위 : 사실
범위:{}
거짓이되면 아들은 아버지의 가치를 물려 받고 아버지의 가치를 바꾸고 아들의 가치도 바뀌고 그 반대도 마찬가지입니다. (상속은 고립되지 않았다)
사실이라면 아들은 아버지의 가치를 물려 받고 아버지의 가치를 바꿉니다. 아들의 가치는 그에 따라 바뀌지 만 아들의 가치가 바뀌면 아버지의 가치는 변하지 않습니다. (상속 및 격리)
{}가되면 아버지의 가치는 상속되지 않으므로 아들의 가치는 비어 있습니다. 어느 당사자의 가치를 변경하면 상대방의 가치에 영향을 줄 수 있습니다. (상속 및 격리 없음)
팁 : 재사용 가능한 구성 요소를 만들려면 스코프를 격리하는 것이 좋습니다. 스코프를 분리함으로써 우리는 지시문이 '독립적'이며 HTML 앱에 쉽게 삽입 될 수 있으며이 접근법은 부모의 범위가 오염되는 것을 방지합니다.
7.2 격리 범위 바인딩 정책을 통해 상위 스코프의 속성에 액세스 할 수 있습니다.
Directive는 격리 범위를 사용할 때 격리 외부의 장소와 상호 작용하는 세 가지 방법을 제공합니다. 이 세 가지
@ 로컬 범위 속성을 현재 DOM 노드의 속성 값에 바인딩합니다. dom 속성은 문자열이기 때문에 결과는 항상 문자열입니다.
& 부모 범위의 맥락에서 표현식을 실행하는 방법을 제공합니다. attr 이름이 지정되지 않은 경우 속성 이름은 동일한 로컬 이름입니다.
= 지침 attrict 속성의 값을 통해 로컬 스코프 속성과 상위 스코프 속성 이름 사이에 양방향 바인딩을 만듭니다.
@ 로컬 스코프 속성
@ 메소드 로컬 속성은 지침 외부 환경에 의해 정의 된 문자열 값에 액세스하는 데 사용되며, 주로 지시문이있는 태그 속성을 통해 외부 문자열 값을 바인딩합니다. 이 바인딩은 일방 통행, 즉 부모 범위의 결합 변화입니다. 지침의 범위의 속성은 동시에 변경되는 반면, 범위의 바인딩 변화는 분리되고 부모의 범위는 알려져 있지 않습니다.
다음 예는 다음과 같습니다. 지시문은 스코프 유형이 격리되어 있지 않다고 선언하고 @ 바인딩 이름 속성을 사용하고 이름 속성을 사용하여 부모 스코프의 속성을 지시문으로 바인딩합니다. 상위 스코프에서 속성 값을 변경할 때 지시문은 값을 동시에 업데이트합니다. 지시 범위의 스코프의 속성 값의 속성 값을 변경할 때, 상위 스코프는 값을 동시에 업데이트 할 수 없습니다.
JS 코드 :
<! docType html> <html lang = "zh"ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> angularjs에 대한 소개 </title> <script type = "text/javaScript"src = ". ng-controller = "myController"> <div> <div> 상위 스코프 : <div> say : {{name}} <br> 상위 스코프의 이름을 변경하십시오 : <input type = "text"value = ""ng-model = "name"/</div> </div> <sg-model = </div> </div> </divecope name = "{name}}. </div> <div> 고립 된 스코프 (부모 스코프를 사용하지 않음 {{name}}) : <div 분리 지정 이름 = "name"> </div> </div> </div> </div> </body> <script type = "text/javaScript"> var app = angular.module ( 'miapp', []); app.controller ( "myController", function ($ scope) {$ scope.name = "hello world";}). 지시 ( "고립 된 디렉티브", function () {return {scope : {name : "@"}, template : 'say : {{{name}} <br> 분리 된 스코프의 이름을 변경합니다. ng-model = "name"> '}; </script> </html>결과 : 페이지의 초기 효과
애니메이션 효과 :
상위 범위의 내용이 변경되었고 아동 범위가 동시에 변경되었음을 알 수 있습니다. 서브 스코프의 내용이 변경되었습니다. 상위 범위의 내용에는 영향을 미치지 않습니다!
= 로컬 범위 속성
= 지침 attrict 속성의 값을 통해 로컬 스코프 속성과 상위 스코프 속성 이름 사이에 양방향 바인딩을 만듭니다.
즉, 양방향 바운드 속성을 원할 때 = 외부 속성을 소개하는 데 사용할 수 있습니다. 부모의 범위를 변경하거나 범위에서 속성을 분리하든 상위 범위 및 격리 범위는 양방향 바운드 관계이기 때문에 속성 값을 동시에 업데이트합니다.
샘플 코드 :
<! docType html> <html lang = "zh"ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> angularjs에 대한 소개 </title> <script type = "text/javaScript"src = ". ng-controller = "myController"> <div> 상위 스코프 : <div> say : {{user.name}} <br> 상위 스코프의 이름을 변경하십시오 : <input type "text"value = ""ng-model = "ng-model ="userbase.name "/> </div> </div> 격리 된 scope : <dive user ="userbase = "userbase". </div> </div> </body> <script type = "text/javaScript"> var app = Angular.Module ( 'myApp', []); app.controller ( "myController", function ($ scope) {$ scope.userbase = {name : 'hello', id : id : 1}). directive ( "rophinatedDirective", function () {return {scope : {user : "="}, 템플릿 : 'say : {user.name}} type = "buttom"value = ""ng-model = "user.name"/> '}}) </script> </html>효과:
부모의 범위와 자식 범위의 내용이 항상 동일하다는 것을 알 수 있습니다!
& 로컬 범위 속성
& 메소드는 상위 범위의 맥락에서 표현식을 직접 실행하는 방법을 제공합니다. 이 표현은 기능이 될 수 있습니다.
예를 들어, 지침을 작성할 때 사용자가 버튼을 클릭하면 지침이 컨트롤러에 알리려고합니다. 컨트롤러는 지침에서 무슨 일이 일어나고 있는지 알 수 없습니다. 아마도 앵귤러에서 이벤트 방송을 사용하여 할 수 있지만 컨트롤러에 이벤트 청취 방법을 추가해야합니다.
가장 좋은 방법은 지시문이 부모의 범위에서 함수를 전달하도록하는 것입니다. Directive에 상위 범위로 업데이트되어야하는 조치가 있으면 상위 스코프 컨텍스트에서 코드 또는 함수를 실행할 수 있습니다.
다음 예제는 지시문에서 상위 범위의 기능을 실행합니다.
<! docType html> <html lang = "zh"ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> angularjs에 대한 소개 </title> <script type = "text/javaScript"src = ". ng-controller = "myController"> <div> 상위 스코프 : <div> say : {{value}} </div> </div> </div> </div> 고립 된 스코프 : <div islop-indirtication action = "click ()"> </div> </div> </div> </body> <script type = "text/javascript"; app.controller ( "myController", function ($ scope) {$ scope.value = "hello world"; $ scope.click = function () {$ scope.value = math.random ();}). directive ( "relipatedDirection", function () {scope : {action : ","}, "},"}, "} value = "Directive"Ng-Click = "Action ()"/> '}})에서 상위 스코프 정의 실행 방법 실행 방법효과:
지침에는 많은 내용이 있으며 트랜스 클러 드, 불만족, 링크 및 컨트롤러에 대해 이야기 해 봅시다.
8. 전송
지시문 내부의 컨텐츠를 템플릿으로 대체하지 않으려면이 값을 true로 설정할 수 있습니다. 일반적으로 NgTransclude 지시문과 함께 사용해야합니다. 예를 들면 : 템플릿 : "<div> hello Every <div ng-transclude> </div> </div>", 현재 명령 내의 내용은 NG-Transclud Div에 포함됩니다. 즉, 모든 <div> hello <div>는 명령 내부의 내용 </div> </div>입니다. 기본값은 False입니다. 이 구성 옵션을 사용하면 지침 요소에 포함 된 컨텐츠를 추출한 다음 지침 템플릿의 특정 위치에 배치 할 수 있습니다. TransClude를 활성화하면 NG-Transclude를 사용하여 번역 된 콘텐츠를 배치 할 위치를 나타냅니다.
<! docType html> <html lang = "zh"ng-app = "myApp"> <head> <meta charset = "utf-8"> <title> angularjs에 대한 소개 </title> <script type = "text/javaScript"src = ". 링크 </li> <li> 두 번째 링크 </li> </ul> </div> </body> <script type = "text/javaScript"> var app = Angular.Module ( 'myApp', []); app.directive ( 'sidebox', function () {return {제한 : 'ea', scope : {title : '@'}, translate : template : '<div>/ <div>/ <h2> {{title}} </ h2>/ <span ng-transclude>/ </ div>/ </ div>'}; </script> </html>결과:
트랜스 클러 드가 : false,
명령어가 TransClude 매개 변수를 사용하는 경우 컨트롤러는 데이터 모델의 변경 사항을 정상적으로 모니터링 할 수 없습니다. 링크 함수에서 $ watch 서비스를 사용하는 것이 좋습니다.
9. 컨트롤러
문자열 또는 함수 일 수 있습니다.
문자열 인 경우 문자열을 컨트롤러 이름으로 사용하여 응용 프로그램에 등록 된 컨트롤러의 생성자를 찾으십시오.
Angular.Module ( 'myApp', []). directive ( 'myDirective', function () {제한 : 'a', // 컨트롤러 : 'somecontroller'}) // 응용 프로그램의 다른 장소는 index.html angular.module ( 'myapp')에 포함 된 다른 파일이 될 수 있습니다. $ attrs, $ transclude) {// 컨트롤러 로직이 여기에 배치됩니다}); 또한 명령어 내부의 익명 함수로 정의 될 수 있으며 여기에 서비스 ($ log, $ timeout 등) [html] 일반적인 사본보기 내 코드 슬라이스 앵글로 도출 된 코드에서 코드 슬라이스보기 ( 'myApp', []) .Directection ( 'myDective', function () {제어 : ', $, $ elent,, $ elent,, $ elent,, $ elent,', $ antelle. $ transclude) {// 컨트롤러 로직이 여기에 배치됩니다}});주입 할 수있는 특별한 서비스 (매개 변수)도 있습니다.
(1) $ 범위, 지침 요소와 관련된 범위
(2) $ 요소, 현재 명령에 해당하는 요소
(3) $ attrs, 현재 요소의 속성으로 구성된 개체
(4) $ transclude, 임베디드 링크 함수, 실제로 요소를 복제하고 DOM을 작동하는 데 사용되는 실행 된 기능
참고 : 재사용 가능한 동작을 정의하는 데 사용되지 않는 한 일반적으로 여기에서 권장되지 않습니다.
명령어의 컨트롤러 및 링크 함수 (나중에 논의)를 교환 할 수 있습니다. 차이점은 컨트롤러가 주로 지침간에 재사용 할 수있는 동작을 제공하는 데 사용되지만 링크 링크 함수는 현재 내부 지침에서 동작을 정의 할 수 있으며 지침간에 재사용 할 수 없습니다.
<! docType html> <html lang = "zh"ng-app = "myApp"> <head> <meta charset = "utf-8"> <title> angularjs에 대한 소개 </title> <script type = "text/javaScript"src = "./ 1.5.3/angular.min.js"> </head> </head> </head>. am lin bingwen ~~~ </hello> </body> <script type = "text/javaScript"> var app = Angular.Module ( 'myApp', []); app.directive ( 'hello', function () {return {retrict : 'ea', transclude : true, // true 컨트롤러로 설정되어 있어야한다는 참고 : function ($ scope, $ element, $ attrs, $ transclude, $ log) {// 여기에서 $ transclude (clone) {angular.eelement ( ') $ atts. </script> </html>출력 결과 :
콘솔 아래 모든 사람을 출력하십시오
$ transclude ()를 살펴 보겠습니다. 여기서는 두 개의 매개 변수가 필요할 수 있습니다. 첫 번째는 $ 스코프, 스코프이며 두 번째는 매개 변수 클론이있는 콜백 함수입니다. 그리고이 클론은 실제로 내장 된 내용 (jQuery로 포장)이며 많은 DOM 작업을 수행 할 수 있습니다.
가장 쉬운 방법입니다
<cript> angular.module ( 'myApp', []). 지시 ( 'mysite', function () {return {return {retrict : 'ea', transclude : true, controller : function ($ scope, $ element, $ attrs, $ transclude, $ log) {var a = $ transclude (); // $ transclude ())}}}}}}; </스크립트>참고 : $ transclude를 사용하면 새로운 범위가 생성됩니다.
기본적으로 간단하고 실질적으로 $ transclude ()를 사용하는 경우 기본 범위는 $ transclude에 의해 생성 된 범위입니다.
그러나 $ transclude ($ scope, function (clone) {})을 사용하면 범위는 지시문의 범위입니다.
그런 다음 질문이 다시옵니다. 부모의 범위를 사용하려면 어떻게해야합니까?
$ scope. $ 부모를 사용할 수 있습니다
마찬가지로 새 범위를 원한다면 $ scope. $ parent.new ();
10. Controlleras
이 옵션은 컨트롤러의 별칭을 설정하는 데 사용됩니다.
과거에는 종종이 방법을 사용하여 코드를 작성했습니다.
Angular.Module ( "app", []) .controller ( "democontroller", [ "$ scope", function ($ scope) {$ scope.title = "angualr";}]) <div ng-app = "ng-controller ="democontroller "> {title}} </div}}나중에 AngularJS1.2는 새로운 구문 설탕을 가져 왔으므로 우리는 이렇게 쓸 수 있습니다.
Angular.Module ( "app", []) .controller ( "democontroller", [function () {this.title = "angualr";}]) <div ng-app = "app"ng-controller = "demo as as demo"> {{demo.title}} </div>우리는 이것을 명령에 쓸 수도 있습니다
<cript> angular.module ( 'myApp', []). 지시 ( 'mysite', function () {return {return {extrict : 'ea', transclude : true, 컨트롤러 : 'somecontroller', controlleras : 'maincontroller'//. 론 구성};}); </스크립트>11. 요청 (문자열 또는 배열)
문자열은 다른 명령의 이름을 나타내며 링크 함수의 네 번째 매개 변수로 사용됩니다. 우리는 특정 사용법을 설명하기 위해 예를 제시 할 수 있습니다. 지금 두 가지 지침을 작성해야한다고 가정 해 봅시다. 링크 링크 함수에는 많은 겹치는 방법이 있습니다 (링크 함수는 나중에 설명합니다). 현재 세 번째 명령어의 컨트롤러에 이러한 반복 된 방법을 쓸 수 있습니다 (컨트롤러는 위에서 언급하여 지침 간의 재사용 동작을 제공합니다). 그런 다음이 두 지침에서 컨트롤러 필드 (세 번째 명령어)와 함께 명령어가 필요합니다.
마지막으로 링크 링크 함수의 네 번째 매개 변수를 통해 이러한 중첩 방법을 참조 할 수 있습니다.
<! docType html> <html ng-app = "myapp"> <head> <script src = "http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"> </script> </head> <body> outer-diretective> <Inner-Directive> <Inner-Directive2> </inner-directive2> </outer-directive> <cript> var app = angular.module ( 'myapp', []); app.directive ( 'outerdirective', function () {return {return {scope : {}, 제한 : 'ae', controller : function ($ scope) {this.say = function (somedipective) {console.log ( 'got :' + somedirective.message);}}); app.directive ( '내시기 적법', function () {return {return {scope : {}, 제한 : 'ae', 요구 사항 : '^outerdirective', '^outerdirective', link : function (scope, elem, attrs, controllerinstance) {scope.message = "hi, leifeng"; controllerinstance.say (scope);};}); app.directive ( 'innerdirective2', function () {return {scope : {}, 'ae', 'ae', '^outerdirective', inturn : function (scope, elem, attrs, controllerinstance) {scope.message = "hi, shushu"; controllerinstance.say (scope (scope);}); </script> </body> </html>지시 사항 외관의 컨트롤러에 정의 된 상기 예제에서의 지시 및 지침 내 디렉션 2.
또한 명령어의 컨트롤러는 다른 지침간에 통신하는 데 사용된다고 설명합니다.
또한 요구의 매개 변수 값에 접두사를 추가 할 수있어 검색 컨트롤러의 동작이 변경됩니다.
(1) 접두사가 없으면 명령어는 자체적으로 제공된 컨트롤러에서 검색됩니다. 컨트롤러가 없으면 오류가 발생합니다.
(2)? 필요한 컨트롤러가 현재 명령어에서 찾을 수없는 경우 NULL은 링크 연결 기능의 네 번째 매개 변수로 전달됩니다.
(3)^필요한 컨트롤러가 현재 명령어에서 찾을 수없는 경우 부모 요소의 컨트롤러가 있습니다.
(4)?^ 조합
12. Anguar의 교육 편집 과정
먼저 AngularJS 라이브러리를로드하고 응용 프로그램의 경계를 찾기 위해 NG-App 지시문을 찾으십시오.
NG-APP에서 정의한 범위에 따라 컴파일을 위해 $ Compile Service에 전화하십시오. AngularJS는 전체 HTML 문서를 가로 지르고 지침에 따라 지침의 우선 순위에 따라 페이지에 선언 된 지침을 처리합니다. DOM은 명령에서 구성 매개 변수 (템플릿, 배치, 트랜스 클러 드 등)에 따라 변환 된 다음 각 명령어의 컴파일 함수를 순서대로 실행하기 시작하여 (컴파일 함수가 명령에 정의되어있는 경우) 템플릿 자체를 변환합니다.
참고 : 여기서 컴파일 함수는 우리의 지침에 구성되어 있으며 위에서 언급 한 $ 컴파일 서비스와 다릅니다. 각 컴파일 함수가 실행되면 링크 함수가 반환되고 모든 링크 함수가 큰 링크 함수로 결합됩니다.
그런 다음이 큰 링크 함수는 주로 데이터 바인딩을 위해 실행되며 DOM에 리스너를 등록하여 범위의 데이터를 동적으로 수정하거나 DOM을 수정하기 위해 범위의 변수를 듣기 위해 $ 시계를 사용하여 양방향 바인딩 등을 설정하지 않으면 링크 기능이 실행됩니다. 그녀가하는 일은 위의 컴파일 리턴 후 모든 링크 기능에 의해 합성 된 큰 링크 함수와 거의 동일합니다.
따라서 지침에서 컴파일 및 링크 옵션은 상호 배타적입니다. 이 두 옵션이 동시에 설정되면 Compile에 의해 반환 된 함수는 링크 함수로 간주되며 링크 옵션 자체는 무시됩니다.
13. 기능을 컴파일합니다
기능 컴파일 (Telement, Tattrs, TransClude) {...}
컴파일 함수는 템플릿 DOM을 수정 해야하는 상황을 처리하는 데 사용됩니다. 대부분의 지침에는 템플릿 수정이 필요하지 않으므로이 기능은 일반적으로 사용되지 않습니다. 사용해야하는 예로는 NgTrepeat가 포함되어 있으며, 템플릿을 수정해야하며 NGView는 컨텐츠를 비동기 적으로로드해야합니다. 컴파일 된 함수는 다음 매개 변수를 허용합니다.
Telement- 템플릿 요소 - 지침이있는 요소. 이 요소와 하위 요소를 변형시키는 것이 안전합니다.
Tattrs- 템플릿 속성 -이 요소에 대한 지침에 의해 선언 된 모든 속성은 컴파일 된 함수에서 공유됩니다.
TransClude- 임베디드 링크 함수 함수 (SCOPE, CLONELINKINGFN).
참고 : 컴파일 된 기능에서 DOM 변형 이외의 작업을 수행하지 마십시오. 더 중요한 것은, DOM 청취 이벤트의 등록은 컴파일 된 기능이 아닌 링크 된 기능에서 수행해야한다는 것입니다.
컴파일 된 함수는 객체 또는 함수를 반환 할 수 있습니다.
반환 함수 - 컴파일 된 함수가 존재하지 않을 때 구성 객체의 링크 속성을 사용하여 등록 된 링크 함수에 해당합니다.
return 오브젝트 - 사전 또는 게시 속성을 통해 함수를 등록한 객체를 반환합니다. 미리 링크 및 사후-선발 기능에 대한 설명을 참조하십시오.
14. 연결 함수
함수 링크 (범위, IELEMENT, IATTRS, 컨트롤러) {...}
링크 함수는 DOM 이벤트를 등록하고 DOM을 업데이트 할 책임이 있습니다. 템플릿이 복제 된 후에 실행되며 대부분의 명령어 로직 코드가 작성된 곳이기도합니다.
스코프 - 지시가 들리는 범위.
IELEMENT- 인스턴스 요소 - 지침이있는 요소. PostLink 함수의 요소의 자식 요소에서 작동하는 것이 안전합니다. 이들은 모두 연결되어 있기 때문입니다.
IATTRS- 인스턴스 속성 - 인스턴스 속성, 현재 요소에 선언 된 표준화 된 속성 목록은 모든 연결된 함수들 사이에서 공유됩니다.
컨트롤러 - 컨트롤러 인스턴스, 즉 현재 명령에 의해 요청 된 Direct2 내부의 컨트롤러. 예를 들면 : 컨트롤러 : function () {this.addstrength = function () {}} Direct2 지시문에서 현재 지시문의 링크 함수에서 컨트롤러를 통해 호출 할 수 있습니다.
자식 요소가 연결되기 전에 사전 연결 기능이 실행됩니다. 링크 함수가 링크 할 올바른 요소를 찾을 수없는 경우 DOM을 변형시키는 데 사용할 수 없습니다.
사후 연결 기능 모든 요소는 연결된 후 실행됩니다.
설명 :
컴파일 옵션 자체는 자주 사용되지 않지만 링크 함수는 자주 사용됩니다. 기본적으로 링크 옵션을 설정하면 실제로 compile () 함수가 링크 함수를 정의 할 수 있도록 postlink () 링크 함수를 만듭니다. 일반적으로 컴파일 함수가 설정되면 지침 및 실시간 데이터를 DOM에 넣기 전에 DOM 작업을 수행하려고합니다. 이 기능에서 노드 추가 및 삭제와 같은 DOM 작업을 수행하는 것이 안전합니다. 컴파일 및 링크 옵션은 상호 배타적입니다. 이 두 옵션이 동시에 설정되면 Compile에 의해 반환 된 함수는 링크 함수로 간주되며 링크 옵션 자체는 무시됩니다. 번역 함수는 템플릿 DOM을 변환 할 책임이 있습니다. 링크 함수는 범위와 DOM을 연결하는 역할을합니다. DOM은 범위가 DOM에 연결되기 전에 수동으로 작동 할 수 있습니다. 실제로, 이런 종류의 작업은 사용자 정의 지침을 작성할 때 매우 드물지만 이러한 기능을 제공하는 몇 가지 내장 지침이 있습니다. 링크 함수는 선택 사항입니다. 컴파일 된 함수가 정의되면 연결된 함수를 반환하므로 두 함수가 정의되면 컴파일 된 함수는 링크 된 함수를 과부하시킵니다. 지침이 간단하고 추가 설정이 필요하지 않은 경우 객체를 교체하기 위해 공장 함수 (콜백 함수)에서 함수를 반환 할 수 있습니다. 이 작업이 완료되면이 기능은 링크 함수입니다.
이 기사는 http://blog.csdn.net/evankaka로 재생산됩니다
위의 내용은 AngularJS의 사용의 전체 내용입니다. 지침 지침, 모든 사람의 학습에 도움이되기를 바랍니다.