Rumah > Artikel > hujung hadapan web > 浅谈angular中@、=、&指令的差异
浅谈angular中@、=、&指令的差异
- 青灯夜游ke hadapan
- 2021-05-08 09:53:202803semak imbas
本篇文章带大家了解一下angular指令中@，=，&的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
【相关推荐：《angular教程》】
当directive中的scope设置为一个对象的时候，该指令就有了一个独立的作用域，AngularJS提供了一种绑定策略用于隔离作用域和外部作用域进行通信。
1、@（or @attr）
使用@符号可以进行单项的数据绑定，取值总是一个字符串，所以要用{{}}。
另外这也是一个单向的绑定，外部数据改变会反应到内部，但是内部数据变数据变化，外部不会变。
属性要用-连接，scope中写它的驼峰格式。
如果没有通过@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、= （or =attr）
使用=进行双向数据绑定，任何一方的值改变都会反应到另一方。因为是双向绑定，所以不要使用{{}}，不然以下demo会报错。
属性要用-连接，scope中写它的驼峰格式。
如果没有通过@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、&（or &attr）
&用来绑定外部的函数。
属性要用-连接，scope中写它的驼峰格式。
如果没有通过@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
更多编程相关知识，请访问：编程视频！！
Atas ialah kandungan terperinci 浅谈angular中@、=、&指令的差异. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!