배경 소개
이 예는 비디오의 예입니다. 세 가지 능력, 강도 강도, 속도 속도, 글로우 라이트가있는 역동적 인 슈퍼맨이 있습니다.
이 세 가지 능력은 세 가지 속성으로 사용되며 동적 슈퍼맨을 태그로 정의합니다. 해당 속성을 추가 하여이 능력을 가질 수 있습니다.
결과 표시를 용이하게하려면 태그에 마우스 응답 이벤트를 추가하십시오. 마우스가 해당 태그로 이동하면 메소드가 트리거되어 기능이있는 기능을 인쇄합니다.
프로그램 분석
HTML 부분의 코드는 다음과 같습니다.
<div> <superman> Nothing! </슈퍼맨> <Superman Strength> 강도!
구현 방법을 봅시다. 첫 번째는 모듈을 만드는 것입니다.
var myAppModule = Angular.Module ( "myApp", []);
이 모듈을 기반으로 이전 모듈과 비슷한 태그 슈퍼맨을 만듭니다.
myAppModule.directive ( "superman", function () {return {scope : {}, 제한 : 'ae', trunplate : true, template : "<div> <div ng-transclude> </div> </div>", controller : function ($ scope) {$ scope.abilities = []; thistrength = () {$ scope. }; });여기서 차이점은 메소드 내에 컨트롤러 속성이 있다는 것입니다. 이것은 NG-Controller와 같은 컨트롤러가 아니라 지침이 외부에 열려있는 인터페이스입니다. 선언 된 방법은 공개 방법으로 외부 적으로 사용할 수 있으며 다른 지침은 종속성을 통해 이러한 방법을 사용할 수 있습니다.
다음으로 기능에 해당하는 세 가지 명령을 만듭니다
myAppModule.directive ( "강도", function () {return {reture : '^superman', link : function (scope, element, attr, supermanctrl) {supermanctrl.addstrength ();}}}); myAppModule.directive ( "speed", function () {return {reture : '^superman', link : function (scope, element, attr, supermanctrl) {supermanctrl.addspeed ();}}}); myAppModule.directive ( "light", function () {return {return : '^superman', link : function (scope, element, attr, supermanctrl) {supermanctrl.addlight ();}}});세 가지 지침의 코드는 거의 동일하며 필요한 지침을 지정해야합니다.
링크에는 추가 매개 변수 Supermanctrl이 있습니다. 이 매개 변수는 Superman의 컨트롤러로 추측되므로 이름 지정 방법은 Superman+Ctrl입니다.
[내부 원칙을 이해하지 못하기 때문에 이것은 단지 추측 일 뿐이지 만 실험에 따르면이 매개 변수의 이름이 변경되면 오류 가보고됩니다. 】
이 세 가지 지침을 선언 한 후이 세 가지 지침을 슈퍼 속성으로 사용할 수 있습니다. 이 속성이 표시되면 링크 내의 내부 메소드가 트리거되고 Superman에 공개 된 메소드가 호출됩니다.
요약하면, 대화식 지침 과정 :
1 먼저 기본 지침을 생성하고 컨트롤러 속성 후에 공개 된 메소드를 대중에게 추가하십시오.
2 다른 대화식 명령을 작성하고 요구 사항 속성 후에 해당 명령 종속성을 추가하십시오. 링크에서 노출 된 메소드를 호출하십시오
모든 프로그램 코드 :
<! 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> <body> <div> <supman> nothing! </superman> <Superman Strength> <Superman> <Superman Strength> </Superman> > 강도 속도 표시등! </superman> </div> <script type = "text/javaScript"> var myAppModule = Angular.Module ( "myApp", []); myAppModule.directive ( "superman", function () {return {scope : {}, 제한 : 'ae', trunplate : true, template : "<div> <div ng-transclude> </div> </div>", controller : function ($ scope) {$ scope.abilities = []; thistrength = () {$ scope. }; }); myAppModule.directive ( "강도", function () {return {reture : '^superman', link : function (scope, element, attr, supermanctrl) {supermanctrl.addstrength ();}}}); myAppModule.directive ( "speed", function () {return {reture : '^superman', link : function (scope, element, attr, supermanctrl) {supermanctrl.addspeed ();}}}); myAppModule.directive ( "light", function () {return {return : '^superman', link : function (scope, element, attr, supermanctrl) {supermanctrl.addlight ();}}}); </script> </body> </html>실행 결과 :
위는 AngularJS 지침의 상호 작용에 대한 정보입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!