이 문서에서는 angularjs사용자 정의 지침의 중요한 세부 정보와 기술이 무엇인지 주로 설명합니다. 모르신다면 오셔서 이것저것 구경해 보세요. 이 글을 함께 살펴보겠습니다
다음은 포괄적이지 않은 대략적인 설명입니다. 언급되지 않은 일부 세부 사항과 중요한 관련 지식은 나중에 설명하겠습니다.
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有关的操作
}
};
});[범위]
부울 또는 객체를 설정할 수 있습니다. 먼저 부울에 대해 이야기해 보겠습니다. 이것은 비교적 간단합니다.
1 true로 설정하면 상위 범위를 상속한다는 뜻입니다.
2. false로 설정하면 상위 범위를 직접 사용합니다.
격리된 범위를 설정하는 또 다른 개체 설정 방법이 있습니다. 격리된 범위를 사용할 때 격리 외부의 장소와 상호 작용할 수 있는 세 가지 방법이 제공됩니다. 다음은 하나씩 설명하는 예입니다. 컨트롤러에 무엇이 있는지 살펴보겠습니다.
angular.module('yelloxingApp', []).directive("scopeExample", ['$rootScope', function($rootScope) {
return {
restrict: 'A',
scope: {
_userDataName: "=userDataName",
_onSend: "&onSend",
_fromName: "@fromName"
},
template: `
<button ng-click="_useParentMethod()">
点击按钮调用父级的方法
</button>
<input ng-model="_userDataName"/>
<ul>
<li>fromName={{newfromname}}</li>
<li>这是从父级获取到的{{_userDataName}}</li>
</ul>`,
link: function($scope, element, attrs) {
//使用@符号可将本地作用域的变量与DOM属性的值进行绑定，即这里通过@得到父类fromName的值
$scope.newfromname = $scope._fromName;
$scope._useParentMethod = function() {
//使用&符号可以在其中调用父类的方法
$scope._onSend({ "email": { "email": "yelloxing@gmail.com" } });
console.log($scope._userDataName);
};
}
};
}]);마지막으로 html에서 사용하는 것을 잊지 마세요.
$scope.name = "心叶";
$scope.user = "yelloxing";
$scope.sendMail = function(email){
console.error(email);
}【require】
다른 컨트롤러를 요청한 다음 이를 링크 방식의 네 번째 매개변수 들어가고, 우리가 주목해야 할 것은 컨트롤러를 찾는 방식이다.
컨트롤러를 찾는 방법은 다음과 같이 이해할 수 있습니다. 사용? 현재 명령에서 필요한 컨트롤러를 찾을 수 없는 경우 링크 함수의 네 번째 매개변수로 null이 전달됨을 나타냅니다. ^ 접두사가 추가되면 명령은 필수 매개변수에 지정된 컨트롤러를 검색합니다. 업스트림 명령 체인. 예를 들어 require: "?^ngModel"과 같이 결합할 수도 있습니다. 접두사가 없으면 명령어는 컨트롤러(또는 지정된 이름을 가진 명령어)가 없으면 자체적으로 검색합니다. 발견하면 실수가 발생합니다. (자세한 내용은 PHP 중국어 웹사이트
AngularJS 개발 매뉴얼속성 터미널: true인 경우 현재 명령어보다 낮은 우선순위를 나타내는 명령어는 처리되지 않습니다. 실행되며 이 명령만 실행됩니다.
3: 뷰와 모델 사이의 데이터 형식 지정
1.ctrl.$formatters.unshift(function(input) {//모델에서 보기로 데이터 형식 지정});
2.ctrl.$parsers.unshift(function(input) {//뷰에서 모델로의 데이터 형식 지정}). 위의 $formatters와 $parser는 뷰에서 모델로, 모델에서 뷰로의 두 가지 대기열로, 파이프라인 흐름과 다소 유사하게 내부에 정의된 메서드를 통해 필터링을 용이하게 하고 최종적으로 대상으로 흐릅니다. 컨트롤러를 찾으려면 require: "?ngModel"과 같은 문을 설정하는 것을 잊지 마세요. 4: 보기 및 모델 데이터 동기화 문제때때로 명령에서 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) 방법을 사용하여 컴파일할 수 있습니다. Six: 일반적으로 사용되는 메서드 또는 서비스문자열을 구문 분석하는 방법에는 두 가지가 있습니다(속성 또는 메서드일 수 있음). 아래 예를 살펴보세요.<p scope-example user-data-name="user" on-send='sendMail(email)' from-name={{name}}></p>AngularJS 사용자 매뉴얼
을 참조하세요. 궁금한 점이 있으면 아래에 메시지를 남겨주세요.위 내용은 Angularjs의 사용자 지정 지시문에 대한 몇 가지 유용한 세부 정보 및 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
