AngularJS의 지시적 스코프에서 '@'와 '='의 차이점은 무엇입니까?
Angular를 읽었습니다.JS 문서에서는 이 주제에 대해 신중하게 설명한 후 지시를 만지작거렸습니다.여기 바이올린이 있다.
다음은 관련 토막입니다.
HTML에서:
<pane bi-title="title" title="{{title}}">{{text}}</pane>창 지시문:
scope: { biTitle: '=', title: '@', bar: '=' },
이해할 수 없는 것이 몇 가지 있습니다.
- 꼭 '우리'를 써야 하죠?
"{{title}}"'@'★★★★★★★★★★★★★★★★★」"title"'=' - 요소를 속성으로 장식하지 않고 부모 스코프에 직접 액세스할 수도 있습니까?
- 문서에는 "대부분 독립 스코프에서 식과 부모 스코프로 데이터를 전달하는 것이 바람직하다"고 쓰여 있지만, 양방향 바인딩에서도 정상적으로 동작하는 것 같습니다.왜 표현 경로가 더 나은가요?
표현 솔루션을 보여주는 또 다른 바이올린을 찾았습니다.http://jsfiddle.net/maxisam/QrCXh/
왜 '@'에는 '{{filename}'을, '='에는 'filename'을 사용해야 합니까?
@는 로컬/다이렉트스코프 속성을 DOM 속성의 평가값에 바인드합니다.사용하시는 경우title=title1 ★★★★★★★★★★★★★★★★★」title="title1"Atribute " DOM "title" "title" 입니다.title1를 . . . . . . .를 사용하는 title="{{title}}"의, "title" "title" "title" "title」의 {{title}}따라서 이 문자열은 현재 설정되어 있는 부모 스코프 속성 "syslog"가 됩니다.속성 값은 항상 문자열이므로 @를 사용할 경우 디렉티브의 범위에서 이 속성의 문자열 값이 항상 지정됩니다.
=는 로컬/패키지 스코프 속성을 상위 스코프 속성에 바인딩합니다.따라서 =에서는 상위 모델/프로퍼티 이름을 DOM 특성 값으로 사용합니다.사용할 수 없습니다.{{}}=에 있습니다.
@를 하면 @을 사용하면 @을 수 있다, 이런 을 할 수.title="{{title}} and then some"-- {{sump}}이(가) 삽입되고 문자열 "and them some"이 연결됩니다.마지막 연결된 문자열은 로컬/프로세서 스코프 속성을 가져옵니다(=에서는 이 작업을 수행할 수 없습니다. @만 사용 가능).
@ 에서는, 를 사용할 필요가 있습니다.attr.$observe('title', function(value) { ... })) functionlink(ing)의 해야 하는 예를 if(scope.title == "...")기대했던 대로 되지 않을 거야이는 이 Atribute에 비동기적으로만 액세스할 수 있음을 의미합니다.템플릿 내에서 값만 사용하는 경우에는 $observe()를 사용할 필요가 없습니다.예.,template: '<div>{{title}}</div>'.
=를 사용하면 $190을 사용할 필요가 없습니다.
요소를 속성으로 장식하지 않고 부모 스코프에 직접 액세스할 수도 있습니까?
네, 하지만 격리 스코프를 사용하지 않는 경우에만요.지시문에서 이 행을 제거합니다.
scope: { ... }
그러면 지시문이 새 범위를 생성하지 않습니다.부모 스코프를 사용합니다.그러면 모든 상위 범위 속성에 직접 액세스할 수 있습니다.
문서에는 "대부분 독립 스코프에서 식을 통해 부모 스코프로 데이터를 전달하는 것이 바람직하다"고 쓰여 있지만, 양방향 바인딩에서도 정상적으로 동작하는 것 같습니다.왜 표현 경로가 더 나은가요?
네, 양방향 바인딩을 통해 로컬/방향 스코프와 부모 스코프가 데이터를 공유할 수 있습니다."Expression binding"을 사용하면 디렉티브가 DOM 속성에 의해 정의된 식(또는 함수)을 호출할 수 있으며, 데이터를 식 또는 함수에 인수로 전달할 수도 있습니다.따라서 부모측과 데이터를 공유할 필요가 없고 부모측 스코프에서 정의된 함수를 호출하고 싶을 경우 & 구문을 사용할 수 있습니다.
「 」를 참조해 주세요.
- Lukas의 격리된 범위 블로그 게시물(@, =, &)
- dnc253의 @ 및 =에 대한 설명
- 범위에 대한 블로그와 같은 답변 -- 지시사항 섹션(요약 섹션 바로 앞)에는 격리된 범위와 상위 범위의 그림이 있습니다. 지시사항 스코프는 한 속성에 @를 사용하고 다른 속성에 =를 사용합니다.
- & vs @ 및 =의 각도 차이는 무엇입니까?JS
만, 는 이 두 가지 제 .@,= , , , , 입니다.&본본저저저저도도도도도도도
세 가지 바인딩 모두 요소의 속성을 통해 상위 범위에서 디렉티브의 격리된 범위로 데이터를 전달하는 방법입니다.
@ binding은 문자열을 전달하기 위한 것입니다.이러한 문자열은
{{}}이치노예 .: :디렉티브의 스코프에 됩니다.보간 표현식은 디렉티브의 상위 범위에 대해 평가됩니다.= 바인딩은 양방향 모델 바인딩용입니다.상위 범위의 모델은 지시문의 격리된 범위의 모델에 링크됩니다.한 모델에 대한 변경은 다른 모델에 영향을 미치며, 그 반대도 마찬가지입니다.
& binding은 디렉티브 범위 내에 메서드를 호출할 수 있도록 디렉티브 범위 내에 전달하기 위한 것입니다.메서드는 디렉티브의 상위 범위에 미리 바인딩되어 있으며 인수를 지원합니다.예를 들어 부모 스코프에서 메서드가 hello(name)인 경우 디렉티브 내에서 메서드를 실행하려면 $scope를 호출해야 합니다.hello(이름: 'world')
스코프 바인딩을 보다 짧은 설명으로 참조하면 이러한 차이를 기억하기 쉬워집니다.
@속성 문자열 바인딩=이원 모델 바인딩&콜백 메서드바인딩
또한 기호는 지시문 구현 내에서 범위 변수가 무엇을 나타내는지도 명확하게 합니다.
@스트링=모델&방법
(어쨌든) 유용성 순서:
- =
- @
- &
=는 양방향 바인딩을 의미하므로 상위 범위에 대한 변수에 대한 참조를 의미합니다. 디렉티브에서 됩니다.
@변수가 디렉티브에 복사(복사)되는 것을 의미합니다.
로는, 가가아 , as , as 。<pane bi-title="{{title}}" title="{{title}}">{{text}}</pane>작동해야 합니다. bi-title는 부모 스코프 변수 값을 수신합니다.이 값은 디렉티브로 변경할 수 있습니다.
부모 범위에서 여러 변수를 변경해야 할 경우 명령어 내에서 부모 범위에서 함수를 실행할 수 있습니다(또는 서비스를 통해 데이터를 전달할 수도 있습니다).
실제 예시와 함께 이 기능이 어떻게 작동하는지 자세히 알아보려면 다음과 같이 하십시오.http://jsfiddle.net/juanmendez/k6chmnch/
var app = angular.module('app', []);
app.controller("myController", function ($scope) {
$scope.title = "binding";
});
app.directive("jmFind", function () {
return {
replace: true,
restrict: 'C',
transclude: true,
scope: {
title1: "=",
title2: "@"
},
template: "<div><p>{{title1}} {{title2}}</p></div>"
};
});
@ 을 끈으로 잡다
- 이렇게 해도 바인딩은 생성되지 않습니다.그냥 전달한 단어를 문자열로 얻는 거야
= 2방향 바인딩
- 통제관으로부터의 변경은 지시서에 의해 보유된 참조에 반영되며, 그 반대도 마찬가지이다.
&스코프가 전달된 개체를 반환하는 함수를 가져오기 때문에 이 동작은 조금 다릅니다.이걸 작동시키기 위해 필요한 거겠죠바이올린이 분명히 해 줄 거야
- 이 getter 함수를 호출하면 결과 객체는 다음과 같이 동작합니다.
- 함수가 전달된 경우: 함수는 호출되었을 때 부모(컨트롤러) 클로저로 실행됩니다.
- 비함수가 전달된 경우: 바인딩이 없는 개체의 로컬 복사본을 가져옵니다.
이 바이올린은 그들이 어떻게 작동하는지 보여줄 것이다.스코프 기능에 특히 주의해 주세요.get... 는 내가 하는지 더 잘 할 수 .&
지시문에 스코프를 추가할 수 있는 방법은 다음 3가지가 있습니다.
- 상위 범위:이것이 기본 범위 상속입니다.
디렉티브와 그 부모(컨트롤러/디렉티브가 있는 내부)의 범위는 동일합니다.따라서 디렉티브 내의 스코프 변수에 대한 변경은 부모 컨트롤러에도 반영됩니다.기본값이므로 지정할 필요가 없습니다.
- 하위 범위: 디렉티브의 범위 변수를 true로 지정하면 상위 범위에서 상속되는 하위 범위를 만듭니다.
여기서 디렉티브 내에서 스코프 변수를 변경하면 상위 스코프에는 반영되지 않지만 스코프 변수의 속성을 변경하면 상위 스코프에 반영됩니다.이는 상위 스코프의 스코프 변수를 실제로 수정했기 때문입니다.
예,
app.directive("myDirective", function(){
return {
restrict: "EA",
scope: true,
link: function(element, scope, attrs){
scope.somvar = "new value"; //doesnot reflect in the parent scope
scope.someObj.someProp = "new value"; //reflects as someObj is of parent, we modified that but did not override.
}
};
});
- 격리 범위:컨트롤러 스코프에서 상속되지 않는 스코프를 작성할 때 사용합니다.
이 문제는 플러그인을 작성할 때 발생합니다.이것은 디렉티브를 임의의 HTML에 배치할 수 있고 부모 스코프의 영향을 받지 않기 때문에 일반적입니다.
이제 상위 범위와 상호 작용하지 않으려면 범위를 빈 개체로 지정할 수 있습니다.맘에 들다,
scope: {} //this does not interact with the parent scope in any way
부모 스코프와의 상호 작용이 필요하기 때문에 대부분의 경우 그렇지 않습니다.따라서 일부 값/변경을 통과시켜야 합니다.이 때문에, 다음의 것을 사용합니다.
1. "@" ( Text binding / one-way binding )
2. "=" ( Direct model binding / two-way binding )
3. "&" ( Behaviour binding / Method binding )
@는 컨트롤러 스코프로부터의 변경이 디렉티브스코프에 반영되지만 디렉티브스코프에서 값을 변경해도 컨트롤러 스코프 변수는 영향을 받지 않음을 의미합니다.
@는 항상 매핑된 속성이 식일 것으로 예상합니다.이는 매우 중요합니다. "@" 접두사가 작동하려면 속성 값을 {{} 안으로 랩해야 합니다.
=는 양방향이므로 지시 범위에서 변수를 변경하면 컨트롤러 범위 변수도 영향을 받습니다.
&을 사용하여 컨트롤러 스코프 메서드를 바인드하여 필요에 따라 디렉티브에서 호출할 수 있도록 합니다.
여기서 장점은 컨트롤러 범위와 지시 범위에서 변수 이름이 같을 필요가 없다는 것입니다.
예를 들어 디렉티브스코프에는 컨트롤러 스코프의 변수 "contVar"와 동기하는 변수 "dirVar"가 있습니다.이는 하나의 컨트롤러가 변수 v1과 동기화할 수 있는 반면 동일한 명령을 사용하는 다른 컨트롤러는 변수 v2와 동기하도록 dirVar를 요구할 수 있기 때문에 디렉티브에 많은 파워와 일반화를 제공합니다.
다음은 사용 예를 제시하겠습니다.
디렉티브와 컨트롤러는 다음과 같습니다.
var app = angular.module("app", []);
app.controller("MainCtrl", function( $scope ){
$scope.name = "Harry";
$scope.color = "#333333";
$scope.reverseName = function(){
$scope.name = $scope.name.split("").reverse().join("");
};
$scope.randomColor = function(){
$scope.color = '#'+Math.floor(Math.random()*16777215).toString(16);
};
});
app.directive("myDirective", function(){
return {
restrict: "EA",
scope: {
name: "@",
color: "=",
reverse: "&"
},
link: function(element, scope, attrs){
//do something like
$scope.reverse();
//calling the controllers function
}
};
});
html(@와 =의 차이점 참고):
<div my-directive
class="directive"
name="{{name}}"
reverse="reverseName()"
color="color" >
</div>
여기 그것을 잘 설명하는 블로그 링크가 있습니다.
간단히 다음 항목을 사용할 수 있습니다.
@ :- 단방향 데이터 바인딩의 문자열 값.한 가지 방법으로 데이터 바인딩은 명령어에만 스코프 값을 전달할 수 있습니다.
= :- 양방향 데이터 바인딩에 대한 개체 값입니다.데이터 바인딩은 html뿐만 아니라 디렉티브에서도 스코프 값을 변경할 수 있습니다.
&:- 메서드 및 기능.
편집
Angular 버전 1.5 이상의 컴포넌트 정의
네 번째
=양방향 데이터 바인딩:- 값을 변경하면 자동으로 업데이트됩니다.<단방향 바인딩 : 부모 스코프에서 파라미터를 읽고 갱신하지 않는 경우.@String Parameters용입니다.&이것은 컴포넌트가 부모 스코프에 출력할 필요가 있는 경우의 콜백용입니다.
Angular code를 포함한 HTML 파일을 작성했습니다.이것들간의 차이를 나타냅니다.
<!DOCTYPE html>
<html>
<head>
<title>Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl as VM">
<a my-dir
attr1="VM.sayHi('Juan')" <!-- scope: "=" -->
attr2="VM.sayHi('Juan')" <!-- scope: "@" -->
attr3="VM.sayHi('Juan')" <!-- scope: "&" -->
></a>
</div>
<script>
angular.module("myApp", [])
.controller("myCtrl", [function(){
var vm = this;
vm.sayHi = function(name){
return ("Hey there, " + name);
}
}])
.directive("myDir", [function(){
return {
scope: {
attr1: "=",
attr2: "@",
attr3: "&"
},
link: function(scope){
console.log(scope.attr1); // =, logs "Hey there, Juan"
console.log(scope.attr2); // @, logs "VM.sayHi('Juan')"
console.log(scope.attr3); // &, logs "function (a){return h(c,a)}"
console.log(scope.attr3()); // &, logs "Hey there, Juan"
}
}
}]);
</script>
</body>
</html>
죽었지만, 가 Angular라는 이JS는 이 부분에서 다루겠습니다.=,<,@,& ★★★★★★★★★★★★★★★★★」::자세한 내용은 여기를 참조하십시오.
=이치노부모에서 속성을 변경하면 자식도 변경되고 그 반대도 마찬가지입니다.
<는 부모에서 자녀로 단방향 바인딩을 확립합니다.상위 속성을 변경하면 하위 속성이 변경되지만 하위 속성을 변경해도 상위 속성에 영향을 미치지 않습니다.
@는 태그 속성의 문자열 값을 하위 속성에 할당합니다.속성에 식이 포함되어 있는 경우 식이 다른 문자열로 평가될 때마다 하위 속성이 업데이트됩니다.예를 들어 다음과 같습니다.
<child-component description="The movie title is {{$ctrl.movie.title}}" />
bindings: {
description: '@',
}
에서는, 「」, 「」.description은 '자녀'라는 ."The movie title is {{$ctrl.movie.title}}"서, snowledge.movie는 부모 스코프의 객체입니다.
&좀 까다롭긴 하지만 실제로 사용할 만한 설득력 있는 이유는 없는 것 같습니다.부모 스코프의 식을 평가하여 파라미터를 자식 스코프의 변수로 대체할 수 있습니다.예(플랭크):
<child-component
foo = "myVar + $ctrl.parentVar + myOtherVar"
</child-component>
angular.module('heroApp').component('childComponent', {
template: "<div>{{ $ctrl.parentFoo({myVar:5, myOtherVar:'xyz'}) }}</div>",
bindings: {
parentFoo: '&foo'
}
});
의 「」parentVar=10식 , 。parentFoo({myVar:5, myOtherVar:'xyz'})5 + 10 + 'xyz'컴포넌트는 다음과 같이 렌더링됩니다.
<div>15xyz</div>
이 복잡한 기능을 언제 사용하고 싶습니까? &는 부모 스코프의 콜백 함수를 자녀 스코프에 전달하기 위해 자주 사용됩니다. 수 은 보다 ('<'는 '<')를 전달하기 괄호 합니다.이것은 보다 간단하고 파라미터를 전달하기 위한 어색한 곱슬머리 괄호 구문을 회피합니다( ){myVar:5, myOtherVar:'xyz'}이치노
를 사용한 &:
<child-component parent-foo="$ctrl.foo(bar)"/>
angular.module('heroApp').component('childComponent', {
template: '<button ng-click="$ctrl.parentFoo({bar:'xyz'})">Call foo in parent</button>',
bindings: {
parentFoo: '&'
}
});
를 사용한 <
<child-component parent-foo="$ctrl.foo"/>
angular.module('heroApp').component('childComponent', {
template: '<button ng-click="$ctrl.parentFoo('xyz')">Call foo in parent</button>',
bindings: {
parentFoo: '<'
}
});
개체(및 어레이)는 복사되지 않고 하위 범위를 기준으로 전달됩니다.즉, 단방향 바인딩인 경우에도 상위 및 하위 범위에서 동일한 개체로 작업합니다.
동작하고 있는 다른 프레픽스를 확인하려면 , 이 플랭크를 엽니다.
One-time binding(initialization) using::
★★★★★★★★★★★★★★★★★★」
버전의 Angular Angular " " " " " " 에서는 자녀 이 한되는 원타임바인딩되었습니다.JS에서는 하위 범위 속성이 한 번만 업데이트되는 일회성 바인딩을 갖는 옵션이 도입되었습니다.이를 통해 상위 속성을 감시할 필요가 없어져 성능이 향상됩니다.바인딩을 하려면 , 「 바인딩」을 추가합니다.일회성 바인딩을 선언하려면::컴포넌트 태그의 식 앞에 다음 명령을 입력합니다.
<child-component
tagline = "::$ctrl.tagline">
</child-component>
됩니다.tagline단방향 또는 양방향 바인딩을 확립하지 않고 자 스코프로 이동합니다.주의: 만약tagline 번째가 '''입니다.undefined상위 스코프에서 angular는 변경될 때까지 이를 감시한 후 하위 스코프에서 해당 속성을 한 번만 업데이트합니다.
요약
다음 표는 속성이 오브젝트, 배열, 문자열 등에 따라 프레픽스가 어떻게 동작하는지를 보여줍니다.
= 방식은 양방향 바인딩으로, 지시문 내에서 실시간 변경을 수행할 수 있습니다.누군가 지시에서 변수를 변경하면 지시문 안에 변경된 데이터가 포함되지만 @ way는 양방향 바인딩이 아닙니다.텍스트처럼 작동합니다.한 번 묶으면 그 값밖에 남지 않습니다.
자세한 내용은 다음 기사를 참조하십시오.
@ local scope 속성은 디렉티브 외부에서 정의된 문자열 값에 액세스하기 위해 사용됩니다.
= 외부 스코프와 지침의 격리 스코프 사이에 양방향 바인딩을 만들어야 하는 경우 = 문자를 사용할 수 있습니다.
& local scope property를 사용하면 디렉티브의 소비자는 디렉티브가 호출할 수 있는 함수를 전달할 수 있습니다.
아래 링크를 확인하시면 예를 들어 명확하게 이해할 수 있습니다.매우 유용하다고 생각해서 공유하려고 합니다.
http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope
예시와 같이 스코프가합니다.$parent에서는 . .래 、 、 아음 、 아 . 、 。title는 부모 스코프에서 정의됩니다.할 수 .$parent.title:
link : function(scope) { console.log(scope.$parent.title) },
template : "the parent has the title {{$parent.title}}"
그러나 대부분의 경우 속성을 사용하여 동일한 효과를 얻을 수 있습니다.
ng-repeat 내의 특수한 데이터 구조를 렌더링하기 위한 지시에서 "격리된 스코프에서 식을 통해 부모 스코프로 데이터를 전달하기 위해" 사용되는 "&" 표기법이 유용하다는 것을 알게 되었습니다.
<render data = "record" deleteFunction = "dataList.splice($index,1)" ng-repeat = "record in dataList" > </render>
렌더링의 일부는 삭제 버튼이었고, 여기서 &를 통해 외부 스코프에서 삭제 기능을 첨부할 수 있었습니다.렌더 디렉티브의 내부에는
scope : { data = "=", deleteFunction = "&"},
template : "... <button ng-click = "deleteFunction()"></button>"
방향 、 ,터 、data = "=" 삭제 할 수 .$digest레코드는 즉시 삭제되고 렌더링되지 않기 때문에 좋지 않은 사이클입니다.
나는 가능한 모든 옵션을 순식간에 실행했다.
다음 모든 옵션을 다룹니다.
scope:{
name:'&'
},
scope:{
name:'='
},
scope:{
name:'@'
},
scope:{
},
scope:true,
https://jsfiddle.net/rishulmatta/v7xf2ujm
그들 사이의 주된 차이점은 단지
@ Attribute string binding
= Two-way model binding
& Callback method binding
@ ★★★★★★★★★★★★★★★★★」=른른 츠키
한 사람이 너를 데리고 있다.
TL;DR;
&는 부모로부터 표현식(다른 응답의 예시와 같이 기능할 뿐만 아니라)을 취득해, 그 표현을 호출하는 디렉티브의 함수로 설정합니다.또한 이 함수는 변수를 사용하여 객체를 전달함으로써 표현식의 변수(짝수 함수 이름)를 대체할 수 있습니다.
&을 참고해서 '하다', '합격하다', '합격하다', '합격하다', '합격하다', '합격하다', '합격하다', '합격하다', '합격하다', '합격하다', '합격하다', '합격하다' 같은 을 말합니다<myDirective expr="x==y"></myDirective>
에서는 이 명령어입니다.expr다음과 같은 식을 호출하는 함수가 됩니다.
function expr(){return x == y}.
의 html "html"로 되어 있습니다.<button ng-click="expr()"></button>표현식을 호출합니다.에서는, 「js」라고 하는 것 입니다.$scope.expr()그 표현도 불러줄 거예요.
$125.x $scopescope 。이치노리노리노리노리노리노리노리노리노리노리노리노리타
!!변 !!!!!!!!!!!!!
콜별로 하면, 「」는 「」입니다.<button ng-click="expr({x:5})"></button>
다음 파라미터로 됩니다.x 부모 " " " "y.
둘 다 덮어쓸 수 있습니다.
, 왜 '아까', '아까', '아까<button ng-click="functionFromParent({x:5})"></button>
의 표현의 표현)을 입니다.<myDirective functionFromParent="function1(x)"></myDirective> 사용 x.
하다
<myDirective functionFromParent="function1(x) + 5"></myDirective>
or or or openicle.
<myDirective functionFromParent="function1(x) + z"></myDirective>
[ ] [ 녀 、 [ 。
<button ng-click="functionFromParent({x:5, z: 4})"></button>.
또는 기능 교체 시에도 사용할 수 있습니다.
<button ng-click="functionFromParent({function1: myfn, x:5, z: 4})"></button>.
그것은 단지 표현일 뿐이고, 그것이 함수인지, 많은 함수인지, 또는 단지 비교인지는 중요하지 않다.또한 이 식의 모든 변수를 바꿀 수 있습니다.
§:
" " " vs " " " :
는 $ $180.x, $180.x, $180.:y를했습니다.
템플릿: " " " " :<myDirective expr="x==y"></myDirective>
<button ng-click="expr()"></button> ®$scope.x==$scope.y
<button ng-click="expr({x: 5})"></button> ®5 == $scope.y
<button ng-click="expr({x:5, y:6})"></button> ®5 == 6
는 $120parent. $120을 정의했습니다function1, $194.x, $194.x.y:
템플릿: " " " " :<myDirective expr="function1(x) + y"></myDirective>
<button ng-click="expr()"></button> ®$scope.function1($scope.x) + $scope.y
<button ng-click="expr({x: 5})"></button> ®$scope.function1(5) + $scope.y
<button ng-click="expr({x:5, y:6})"></button> ®$scope.function1(5) + 6
★★★★★★★★★★★★★★★★★★yFn 이 y y y y y y y y y y y
<button ng-click="expr({function1: myFn, x:5, y:6})"></button> ®$scope.myFn(5) + 6
왜 '@'에는 '{{filename}'을, '='에는 'filename'을 사용해야 합니까?
{{title}}을(를) 사용하면 부모 스코프 값만 디렉티브뷰에 전달되어 평가됩니다.이는 한 가지 방법으로 제한되며, 이는 변경이 상위 범위에 반영되지 않음을 의미합니다.하위 지시문의 변경 사항을 상위 범위에도 반영하려는 경우 '='을 사용할 수 있습니다.이 길은 두 가지입니다.
요소를 속성으로 장식하지 않고 부모 스코프에 직접 액세스할 수도 있습니까?
디렉티브에 스코프 속성(scope : {})이 포함되어 있는 경우 부모 스코프에 직접 액세스 할 수 없게 됩니다.하지만 여전히 스코프를 통해 접근할 수 있습니다.$parent 등지시문에서 범위를 제거하면 직접 액세스할 수 있습니다.
문서에는 "대부분 독립 스코프에서 식을 통해 부모 스코프로 데이터를 전달하는 것이 바람직하다"고 쓰여 있지만, 양방향 바인딩에서도 정상적으로 동작하는 것 같습니다.왜 표현 경로가 더 나은가요?
문맥에 따라 다릅니다.데이터로 표현식 또는 함수를 호출하려면 &를 사용하고, 데이터를 공유하려면 '='를 사용하여 이중 보정 방법을 사용할 수 있습니다.
데이터를 디렉티브에 전달하는 여러 방법의 차이는 다음 링크에서 확인할 수 있습니다.
http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs
@ 속성 문자열 바인딩(일방향) = 양방향 모델 바인딩 및 콜백 방식 바인딩
@는 로컬/다이렉트스코프 속성을 DOM 속성의 평가값에 바인드합니다.=는 로컬/패키지 스코프 속성을 상위 스코프 속성에 바인딩합니다.& binding은 디렉티브 범위 내에 메서드를 호출할 수 있도록 디렉티브 범위 내에 전달하기 위한 것입니다.
@ Attribute String binding = 양방향 모델바인딩 및 Callback 메서드바인딩
언급URL : https://stackoverflow.com/questions/14050195/what-is-the-difference-between-and-in-directive-scope-in-angularjs
'programing' 카테고리의 다른 글
| 워드프레스의 사용자 지정 게시 유형에 다중 메타 상자 추가 (0) | 2023.03.11 |
|---|---|
| 플러그인이 활성화 중에 예기치 않은 출력의 X자를 생성했습니다(WordPress). (0) | 2023.03.11 |
| 외부 부품 개발 시 리액트 2부 로드 오류를 방지하려면 어떻게 해야 합니까? (0) | 2023.03.11 |
| Typescript에서의 인터페이스와 클래스의 차이 (0) | 2023.03.11 |
| Angular 2에서 HTML 템플릿 인쇄(Angular 2에서 ng-print) (0) | 2023.03.11 |