Maison > Article > interface Web > Une brève discussion sur les différences entre les instructions @, = et en angulaire
Cet article vous fera découvrir les différences entre @, = et dans la directive angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
[Recommandation associée : "tutoriel angulaire"]
Lorsque la portée de la directive est définie sur un objet , cette directive a une portée indépendante et AngularJS fournit une stratégie contraignante pour communiquer entre la portée isolée et la portée externe.
1. @ (ou @attr)
Utilisez le symbole @ pour la liaison de données à un seul élément. La valeur est toujours une chaîne, utilisez donc {. {}}.
De plus, il s'agit également d'une liaison unidirectionnelle. Les modifications des données externes seront reflétées en interne, mais si les données internes changent, les données externes ne changeront pas. L'attribut
doit être connecté avec -, et son format camel case doit être écrit dans la portée.
Si le nom de l'attribut n'est pas spécifié via @attr, le nom local doit être cohérent avec le nom de l'attribut 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. = (ou =attr)
Utilisez = pour la liaison de données bidirectionnelle, et les changements de valeur de chaque côté seront reflétés de l'autre côté. . Puisqu'il s'agit d'une liaison bidirectionnelle, n'utilisez pas {{}}, sinon la démo suivante signalera une erreur. L'attribut
doit être connecté avec -, et son format camel case doit être écrit dans la portée.
Si le nom de l'attribut n'est pas spécifié via @attr, le nom local doit être cohérent avec le nom de l'attribut 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. & (ou &attr)
& est utilisé pour lier des fonctions externes. L'attribut
doit être connecté avec -, et son format camel case doit être écrit dans la portée.
Si le nom de l'attribut n'est pas spécifié via @attr, le nom local doit être cohérent avec le nom de l'attribut 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
Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!