浅谈angular中@、=、&指令的差异

文章2022-12-1087 人已阅来源:网络

本篇文章带大家了解一下angular指令中@,=,&的区别。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

浅谈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属性的名称一致。

<!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中@、=、&指令的差异的详细内容!