本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章带大家了解一下angular指令中@,=,&的区别。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
【相关推荐:《angular教程》】
当directive中的scope设置为一个对象的时候,该指令就有了一个独立的作用域,AngularJS提供了一种绑定策略用于隔离作用域和外部作用域进行通信。
1、@(or @attr)
使用@符号可以进行单项的数据绑定,取值总是一个字符串,所以要用{{}}。
另外这也是一个单向的绑定,外部数据改变会反应到内部,但是内部数据变数据变化,外部不会变。
属性要用-连接,scope中写它的驼峰格式。
如果没有通过@attr指定属性名称,那么本地名称要与DOM属性的名称一致。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!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属性的名称一致。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!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属性的名称一致。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!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= "count" />
</div>
<my-name show-name= "increment()" >
</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 . count = 0;
$scope .increment = function (){
$scope . count ++;
};
}).directive( "myName" , function (){
return {
restrict: "EA" ,
scope:{
showName: '&'
},
template: '<input type="button" ng-click="showName()" value="+1"/>'
}
});
</script>
</html>
|
更多编程相关知识,请访问:编程视频!!
以上就是浅谈angular中@、=、&指令的差异的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
浅谈Angular中@、=、&指令的差异
Angular-指令总汇
浅谈Angular中的dom操作
20个优秀的Angular开源项目,你了解几个呢?
浅谈Angular控制器通信的4种方式
浅谈Angular中如何添加和使用font awesome
浅谈Angular中elem.scope()、elem.isolatescope和$compile(elem)(scope)中scope的区别
如何利用管道提高Angular应用程序的性能?
详解Angular根模块与特性模块
详解Angular使用controlvalueaccessor实现自定义表单控件
更多相关阅读请进入《Angular》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 浅谈angular中@、=、&指令的差异