AngularJS에서 사용자 지정 지시문을 구현할 때 이러한 기호 사용에 대해 많이 읽었지만 그 개념은 여전히 명확하지 않습니다. 내 말은, 사용자 지정 지시문에서 범위 값 중 하나를 사용하면 무엇을 의미합니까?
var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function(){
return{
restrict:'E',
scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
}
});여기서 우리는 범위를 정확히 무엇입니까?
공식 문서에 "scope : '>'" 가 있는지 여부도 확실 하지 않습니다. 내 프로젝트에서 사용되었습니다.
편집 -1
의 사용 "범위 : '>'" 내 프로젝트의 문제이고 그것은 수정되었습니다.
답변:
AngularJS 지시문에서 범위를 사용하면 지시문이 적용되는 요소의 속성에있는 데이터에 액세스 할 수 있습니다.
이것은 예제와 함께 가장 잘 설명됩니다.
<div my-customer name="Customer XYZ"></div>지시어 정의 :
angular.module('myModule', [])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerName: '@name'
},
controllerAs: 'vm',
bindToController: true,
controller: ['$http', function($http) {
var vm = this;
vm.doStuff = function(pane) {
console.log(vm.customerName);
};
}],
link: function(scope, element, attrs) {
console.log(scope.customerName);
}
};
});때 scope속성이 사용되는 지시어는 직접 부모 컨트롤러의 범위를 액세스 할 수 없습니다를 의미하는 소위 "고립 범위"모드에 있습니다.
매우 간단한 용어로, 바인딩 기호의 의미는 다음과 같습니다.
someObject: '=' (양방향 데이터 바인딩)
someString: '@'(직접 또는 이중 중괄호 표기법으로 보간을 통해 전달됨 {{}})
someExpression: '&'(예를 들어 hideDialog())
이 정보는 AngularJS 지시문 문서 페이지 에 있지만 페이지 전체에 약간 퍼져 있습니다.
기호 >는 구문의 일부가 아닙니다.
그러나 AngularJS 컴포넌트 바인딩의< 일부로 존재하며 단방향 바인딩을 의미합니다.
> 설명서에 없습니다.
< 단방향 바인딩입니다.
@바인딩은 문자열을 전달하기위한 것입니다. 이 문자열 {{}}은 보간 된 값에 대한 표현식을 지원 합니다.
=바인딩은 양방향 모델 바인딩입니다. 부모 범위의 모델은 지시문의 격리 된 범위의 모델에 연결됩니다.
& 바인딩은 지시문 내에서 호출 될 수 있도록 메소드를 지시문 범위로 전달하기위한 것입니다.
지시문에서 scope : true를 설정하면 Angular js는 해당 지시문에 대한 새 범위를 만듭니다. 즉, 지시문 범위에 대한 변경 사항은 상위 컨트롤러에 다시 반영되지 않습니다.
< 단방향 바인딩
= 양방향 바인딩
& 함수 바인딩
@ 문자열 만 전달
고객 지시문을 작성할 때 지시문의 범위는 분리 된 범위에있을 수 있습니다. 지시문이 제어기와 범위를 공유하지 않음을 의미합니다. 지시어와 컨트롤러 모두 자체 범위가 있습니다. 그러나 데이터는 세 가지 가능한 방식으로 지시문 범위로 전달 될 수 있습니다.
@문자열 리터럴, 패스 문자열 값, 단방향 바인딩을 사용하여 데이터를 문자열로 전달할 수 있습니다 .=문자열 리터럴, 전달 오브젝트, 두 가지 방법 바인딩을 사용하여 오브젝트로 오브젝트를 전달할 수 있습니다 .&문자열 리터럴 함수로 전달 될 수 있으며 외부 함수를 호출하며 지시문에서 컨트롤러로 데이터를 전달할 수 있습니다.지시문에 대한 AngularJS 문서 는 기호의 의미에 대해 잘 작성되었습니다.
분명히, 당신은 단지 가질 수 없습니다
scope: '@'지시문 정의에서. 다음과 같이 해당 바인딩을 적용 할 속성이 있어야합니다.
scope: {
myProperty: '@'
}사이트의 설명서와 자습서를 읽어 보시기 바랍니다. 분리 된 범위 및 기타 주제에 대해 훨씬 더 많은 정보가 필요합니다.
다음은 위의 링크 페이지에서 인용 한 값입니다 scope.
scope 속성은 true, 객체 또는 잘못된 값일 수 있습니다.
falsy : 지시문에 대한 범위가 만들어지지 않습니다. 지시문은 부모의 범위를 사용합니다.
true: 지시어 요소에 대해 부모에서 프로토 타입으로 상속되는 새로운 하위 범위가 작성됩니다. 동일한 요소에 여러 지시문이 새 범위를 요청하면 하나의 새 범위 만 작성됩니다. 템플릿의 루트는 항상 새로운 범위를 가지므로 템플릿의 루트에는 새 범위 규칙이 적용되지 않습니다.
{...}(객체 해시) : 지시어 요소에 대해 새로운 "격리"범위가 생성됩니다. '격리'범위는 상위 범위에서 프로토 타입으로 상속되지 않는다는 점에서 일반 범위와 다릅니다. 이는 재사용 가능한 구성 요소를 작성할 때 유용하며, 이는 상위 범위의 데이터를 실수로 읽거나 수정해서는 안됩니다.
https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ compile # -scope-에서 CC- 02 -SA 3.0으로 라이센스를 취득하여 2017-02-13에서 검색 함
AngularJS 1.6의 기호로 값을 바인딩하는 데 문제가있었습니다. undefined작동하는 동일한 파일의 다른 바인딩과 동일한 방식으로 수행했지만 아무 가치 도 얻지 못했습니다.
문제는 : 내 변수 이름에 밑줄이 있습니다.
이것은 실패합니다 :
bindings: { import_nr: '='}이것은 작동합니다 :
bindings: { importnr: '='}(원래 질문과 완전히 관련이있는 것은 아니지만 제가 살펴봤을 때 가장 많이 검색된 결과 중 하나 였으므로 같은 문제를 가진 사람에게 도움이 되길 바랍니다.)
@??