프로젝트에서 Angularjs 사용자 정의 지침을 사용하는 방법
- php中世界最好的语言원래의
- 2018-06-06 15:32:571468검색
이번에는 프로젝트에서 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有关的操作
}
};
});
두: 일부 속성 설명
[범위]
부울 또는 객체를 먼저 설정할 수 있습니다. 이는 비교적 간단합니다.
1. true로 설정하면 상위 범위를 상속한다는 의미이며
2. false로 설정하려면 상위 범위를 직접 사용하세요.
격리된 범위를 설정하는 또 다른 개체 설정 방법이 있습니다. 격리된 범위를 사용할 때 격리 외부의 장소와 상호 작용할 수 있는 세 가지 방법이 제공됩니다. 다음은 하나씩 설명하는 예입니다. 컨트롤러에 무엇이 있는지 살펴보겠습니다.
angular.module('yelloxingApp', []).directive("scopeExample", ['$rootScope', function($rootScope) {
return {
restrict: 'A',
scope: {
_userDataName: "=userDataName",
_onSend: "&onSend",
_fromName: "@fromName"
},
template: `
e1f5a1ee9c6dca37bcd669731a393538
点击按钮调用父级的方法
65281c5ac262bf6d81768915a4a77ac0
4274db3893f1db7d5323331011e4e7a9
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6fromName={{newfromname}}bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6这是从父级获取到的{{_userDataName}}bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689`,
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에서 사용하는 것을 잊지 마세요.
코드 복사코드는 다음과 같습니다. 1fac4cc81980bc1469cb76078c9f447f94b3e26ee717c64999d7867364b1b4a3
【require】
다른 컨트롤러를 요청하고 그런 다음 이를 링크 메소드의 네 번째 매개변수로 사용합니다. 이를 전달합니다. 우리가 주목해야 할 것은 컨트롤러를 찾는 메소드입니다.
컨트롤러를 찾는 방법은 다음과 같이 이해할 수 있습니다. 사용? 현재 명령에서 필요한 컨트롤러를 찾을 수 없는 경우 링크 함수의 네 번째 매개변수로 null이 전달됨을 나타냅니다. ^ 접두사가 추가되면 명령은 필수 매개변수에 지정된 컨트롤러를 검색합니다. 업스트림 명령 체인. 예를 들어 require: "?^ngModel"과 같이 결합할 수도 있습니다. 접두사가 없으면 명령어는 컨트롤러(또는 지정된 이름을 가진 명령어)가 없으면 자체적으로 검색합니다. 발견하면 실수가 발생합니다.
[terminal]
속성 터미널: true인 경우 현재 명령어보다 우선순위가 낮은 명령어는 실행되지 않고, 이 명령어만 실행됩니다.
3: 뷰와 모델 사이의 데이터 형식 지정필터 기능과 유사하게 때로는 합의를 촉진하기 위해 페이지에서 일종의 번역 후 데이터를 표시하기를 원하지만 데이터베이스의 경우 간단할 수 있습니다. 일련 번호가 더 유용하므로 이 기능을 구현하려면 링크에서 다음 방법을 사용해야 할 수도 있습니다.
$scope.name = "心叶";
$scope.user = "yelloxing";
$scope.sendMail = function(email){
console.error(email);
}
위의 $formatters 및 $parser는 보기에서 모델로, 모델에서 보기로 두 개의 대기열입니다. 내부 정의 필터링 방법은 파이프 흐름과 다소 유사하며 최종적으로 목적지로 흐릅니다.
컨트롤러를 찾으려면 require: "?ngModel"과 같은 문을 설정하는 것을 잊지 마세요.
네 가지: 보기 및 모델 데이터 동기화 문제때때로 명령에서 jquery를 통해 입력 데이터가 수정되지만 Anglejs는 이를 인식하지 못합니다. 이때 다음 방법 중 하나를 선택할 수 있습니다.
1. 입력 상자 변경을 트리거하고 Angularjs가 데이터가 변경되었음을 발견한 다음 $setViewValue(value)를 호출하여 데이터를 동기화합니다.
1.ctrl.$formatters.unshift(function(input) {//model到view的数据格式化})；
2.ctrl.$parsers.unshift(function(input) {//view到model的数据格式化})。2 값을 viewValue 및 modelValue에 동기화하는 동작을 직접 수동으로 트리거합니다.
$("input").trigger("change");5 : 여러 단편 기술
1. 입력 상자가 적합한지 여부에 따라 true 또는 false를 설정합니다. ctrl.$setValidity(errorType, boolean); //errorType은 오류 범주를 나타내며 사용자 정의할 수 있습니다
2. 물론 컬렉션 모니터링과 같은 방법도 있습니다:
ctrl.$setViewValue($scope.info)。
3. 때로는 명령어에 새로 추가된 문자열을angularjs로 관리해야 할 경우 다음 방법을 사용하여 컴파일할 수 있습니다.
$scope.$watch(attrs['ngModel'], function(newValue, oldValue) {});믿습니다. 이 기사의 사례를 읽은 후 방법을 익혔습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
Vue 계산 속성 및 리스너 실제 프로젝트 세부 설명JS+TypeScript에서 클래스를 사용하는 방법위 내용은 프로젝트에서 Angularjs 사용자 정의 지침을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!