이 글은 angular 지침에서 @, =, &의 차이점을 이해하는 데 도움이 될 것입니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
【관련 추천: "angular Tutorial"】
지시문의 범위가 객체로 설정되면 지시문은 독립적인 범위를 가지며 AngularJS는 격리된 범위 간 통신에 사용되는 바인딩 전략을 제공합니다. 그리고 외부 범위.
1. @(또는 @attr)
단일 항목 데이터를 바인딩하려면 @ 기호를 사용하세요. 값은 항상 문자열이므로 {{}}를 사용하세요.
또한 이 역시 단방향 바인딩입니다. 외부 데이터가 변경되면 내부적으로 반영되지만, 내부 데이터가 변경되면 외부 데이터는 변경되지 않습니다.
속성은 -로 연결되어야 하며 범위에는 카멜 케이스 형식으로 작성해야 합니다.
@attr을 통해 속성 이름을 지정하지 않은 경우 로컬 이름은 DOM 속성 이름과 일치해야 합니다.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS</title>
</head>
<body>
<div ng-controller="parent">
<div>
<input type="text" ng-model="name"/>
</div>
<my-name show-name="{{name}}">
</my-name>
</div>
</body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("parent", function($scope){
$scope.name = "Jhon";
}).directive("myName", function(){
return {
restrict:"EA",
scope:{
showName: '@'
// name: '@showName'
},
template:'<input type="text" ng-model="showName"/>',
// template:'<input type="text" ng-model="name"/>',
}
});
</script>
</html>2, = (또는 =attr)
양방향 데이터 바인딩에 =를 사용하면 양쪽의 값 변경 사항이 반대쪽에 반영됩니다. 양방향 바인딩이므로 {{}}를 사용하지 마세요. 그렇지 않으면 다음 데모에서 오류가 보고됩니다.
속성은 -로 연결되어야 하며 범위에는 카멜 케이스 형식으로 작성해야 합니다.
@attr을 통해 속성 이름을 지정하지 않은 경우 로컬 이름은 DOM 속성 이름과 일치해야 합니다.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS</title>
</head>
<body>
<div ng-controller="parent">
<div>
<input type="text" ng-model="name"/>
</div>
<my-name show-name="name">
</my-name>
</div>
</body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("parent", function($scope){
$scope.name = "Jhon";
}).directive("myName", function(){
return {
restrict:"EA",
scope:{
showName: '='
},
template:'<input type="text" ng-model="showName"/>'
}
});
</script>
</html>3, & (또는 &attr)
&는 외부 기능을 바인딩하는 데 사용됩니다.
속성은 -로 연결되어야 하며 범위에는 카멜 케이스 형식으로 작성해야 합니다.
@attr을 통해 속성 이름을 지정하지 않은 경우 로컬 이름은 DOM 속성 이름과 일치해야 합니다.
76c82f278ac045591c9159d381de2c57
4704c240457a27d06147e4b0954b83f6
93f0f5c25f18dab9d176bd4f6de5d30e
4d0d87937f6c83b675e896c64d3eb7c9
b2386ffb911b14667cb8f0f91ea547a7AngularJS6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
3cf3733f936ee7ff9ab6793a2dc37e9c
dc6dce4a544fdca2df29d5ac0ea9906b
58a4888bfd6bdd4deef6ed9257169b2c
16b28748ea4df4d9c2150843fecfba68
9b92361dfcb7f4f2d4da3631b19fe5e4
43dc565517fdd6198f30dfe101a69eb8
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
144fcfe8d86d863df55fad0ee5374c042cacc6d41bbb37262a98f745aa00fbf0
8019067d09615e43c7904885b5246f0a
var app = angular.module("myApp", []);
app.controller("parent", function($scope){
$scope.count = 0;
$scope.increment = function(){
$scope.count++;
};
}).directive("myName", function(){
return {
restrict:"EA",
scope:{
showName: '&'
},
template:'d05c16aa6e8be371f39f1d631fa39062'
}
});
2cacc6d41bbb37262a98f745aa00fbf0
73a6ac4ed44ffec12cee46588e518a5e
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !
위 내용은 각도에서 @, = 및 명령어의 차이점에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!