이번에는 Angularjs커스텀 명령어 사용법과 Angularjs 커스텀 명령어 사용 시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.
One: 사용자 정의 지침에 일반적으로 사용되는 템플릿
다음은 포괄적이지 않은 대략적인 설명입니다. 언급되지 않은 일부 세부 사항과 중요한 관련 지식은 나중에 설명됩니다.
angular.module('yelloxingApp', []).directive('uiDirective', function() { return { restrict:String,//标明该指令可以在模板中用于元素E、属性A、类C和注释M或组合 priority:Number,//设置指令执行优先级,在某个DOM上优先级高的会先执行 terminal:Boolean, template:String or Template Function,//就是设置模板,和下面的templateUrl属性二个只可以设置一个,目的一样 templateUrl:String or Template Function,//除了字符串,这二个属性还可以设置函数 replace:Boolean,//指令模板是否替换原来的元素 scope:Boolean or Object, controller:String or function(scope, element, attrs) { ... }, require:String or Array, //你需要知道link在每个实例都执行一遍,compile全程只会执行一遍 link: function(scope, element, attrs,ctrl) { ... }, compile:function(element, attrs) { //常用的就是compile的此处写执行一次的代码,或者在link方法里面写和dom有关的操作 } }; });
Two: 일부 속성 설명
[범위]
부울 또는 객체를 먼저 설정할 수 있습니다. 이는 비교적 간단합니다.
1. true로 설정하면 상위 범위를 상속한다는 의미이며
2. false로 설정하려면 상위 범위를 직접 사용하세요.
격리된 범위를 설정하는 개체 설정 방법도 있습니다. 격리된 범위를 사용할 때 격리 외부의 장소와 상호 작용할 수 있는 세 가지 방법이 제공됩니다. 다음은 하나씩 설명하는 예입니다.
controller 코드 복사코드는 다음과 같습니다.
【require】
다른 요청 컨트롤러를 선택하고 네 번째 링크 방법으로 사용합니다. 매개변수를 전달할 때 우리가 주목해야 할 것은 컨트롤러를 찾는 방법입니다.
컨트롤러를 찾는 방법은 다음과 같이 이해할 수 있습니다. 사용? 현재 명령에서 필요한 컨트롤러를 찾을 수 없는 경우 링크 함수의 네 번째 매개변수로 null이 전달됨을 나타냅니다. ^ 접두사가 추가되면 명령은 필수 매개변수에 지정된 컨트롤러를 검색합니다. 업스트림 명령 체인. 예를 들어 require: "?^ngModel"과 같이 결합할 수도 있습니다. 접두사가 없으면 명령어는 컨트롤러(또는 지정된 이름을 가진 명령어)가 없으면 자체적으로 검색합니다. 발견하면 실수가 발생합니다.
[terminal]
속성 터미널: true인 경우 현재 명령어보다 우선순위가 낮은 명령어는 실행되지 않고, 이 명령어만 실행됩니다.
3: 뷰와 모델 사이의 데이터 형식화는
filter의 기능과 유사합니다. 때로는 합의를 촉진하기 위해 페이지에 일종의 번역 후 데이터가 표시되기를 원할 수도 있습니다. 데이터베이스 간단한 일련 번호가 더 유리하므로 이 기능을 달성하려면 링크에서 다음 방법을 사용해야 할 수도 있습니다: 1.ctrl.$formatters.unshift(function(input) {//모델에서 뷰로 데이터 형식 지정 } );
2.ctrl.$parsers.unshift(function(input) {//뷰에서 모델로의 데이터 형식 지정}).
위의 $formatters와 $parser는 뷰에서 모델로, 모델에서 뷰로의 두 가지 대기열로, 파이프라인 흐름과 다소 유사하게 내부에 정의된 메서드를 통해 필터링을 용이하게 하고 최종적으로 대상으로 흐릅니다.
컨트롤러를 찾으려면 require: "?ngModel"과 같은 문을 설정하는 것을 잊지 마세요.
네 가지: 보기 및 모델 데이터 동기화 문제때때로 명령에서 jquery를 통해 입력 데이터가 수정되지만 Anglejs는 이를 인식하지 못합니다. 이때 다음 방법 중 하나를 선택할 수 있습니다.
1. 입력 상자 변경을 트리거하고 Angularjs가 데이터가 변경되었음을 발견한 다음 $setViewValue(value)를 호출하여 데이터를 동기화합니다. $("input").trigger("change");
2 직접 수동으로 트리거합니다. viewValue에 대한 값 동기화 및 modelValue의 동작: ctrl.$setViewValue($scope.info).
다섯 가지: 몇 가지 단편적인 기술
1. 입력 상자가 적합한지 여부에 따라 true 또는 false를 설정합니다. ctrl.$setValidity(errorType, boolean);//errorType은 오류 범주를 나타내며 사용자 정의할 수 있습니다
2. 모니터링 사양 모델 값은 물론 모니터링 컬렉션과 같은 방법도 있습니다: $scope.$watch(attrs['ngModel'], function(newValue, oldValue) {});
3. 지침 Anglejs로 관리해야 하는 경우 $compile(newHtml)($scope) 방법을 사용하여 컴파일할 수 있습니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
Angular CLI를 사용하여 Angular 프로젝트를 만드는 방법
위 내용은 Angularjs 사용자 정의 지시문을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!