A brief discussion on the differences of @, =, & instructions in angular-JS Tutorial-php.cn

A brief discussion on the differences of @, =, & instructions in angular

青灯夜游

Release： 2021-05-12 10:31:36

forward

2872 people have browsed it

This article will take you through the differences between @, =, & in angular instructions. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

A brief discussion on the differences of @, =, & instructions in angular

[Related recommendation: "angular tutorial"]

When the scope in the directive is set to an object , this directive has an independent scope, and AngularJS provides a binding strategy for communicating between the isolated scope and the external scope.

1. @（or @attr）

Use the @ symbol for single-item data binding. The value is always a string, so use {{}}.

In addition, this is also a one-way binding. Changes in external data will be reflected internally, but if the internal data changes, the external data will not change.

Attributes should be connected with -, and its camel case format should be written in the scope.

If the attribute name is not specified through @attr, the local name must be consistent with the name of the DOM attribute.

<!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: &#39;@&#39;
				// name: &#39;@showName&#39;
			},
			template:&#39;<input type="text" ng-model="showName"/>&#39;,
			// template:&#39;<input type="text" ng-model="name"/>&#39;,
		}
	});
</script>
</html>

Copy after login

2, = (or =attr)

Use = for two-way data binding. Value changes on either side will be reflected on the other side. Because it is a two-way binding, do not use {{}}, otherwise the following demo will report an error.

Attributes should be connected with -, and its camel case format should be written in the scope.

If the attribute name is not specified through @attr, the local name must be consistent with the name of the DOM attribute.

<!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: &#39;=&#39;
			},
			template:&#39;<input type="text" ng-model="showName"/>&#39;
		}
	});
</script>
</html>

Copy after login

3. &（or &attr）

& is used to bind external functions.

Attributes should be connected with -, and its camel case format should be written in the scope.

If the attribute name is not specified through @attr, the local name must be consistent with the name of the DOM attribute.

<!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: &#39;&&#39;
			},
			template:&#39;<input type="button" ng-click="showName()" value="+1"/>&#39;
		}
	});
</script>
</html>

Copy after login

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of A brief discussion on the differences of @, =, & instructions in angular. For more information, please follow other related articles on the PHP Chinese website!