Heim > Artikel > Web-Frontend > Eine kurze Diskussion über die Unterschiede von @, = und Anweisungen in Angular

Eine kurze Diskussion über die Unterschiede von @, = und Anweisungen in Angular

青灯夜游nach vorne: 2021-05-08 09:53:202804Durchsuche

Dieser Artikel hilft Ihnen, die Unterschiede zwischen @, = und & in den eckigen-Anweisungen zu verstehen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

【Verwandte Empfehlung: „Angular Tutorial“】

Wenn der Bereich in der Direktive auf ein Objekt festgelegt ist, verfügt die Direktive über einen unabhängigen Bereich und AngularJS stellt eine Bindungsstrategie bereit, die für die Kommunikation zwischen isolierten Bereichen verwendet wird und externe Bereiche.

1. @（oder @attr）

Verwenden Sie das @-Symbol, um einzelne Elementdaten zu binden. Der Wert ist immer eine Zeichenfolge, also verwenden Sie {{}}.

Darüber hinaus handelt es sich hierbei auch um eine einseitige Bindung. Änderungen an externen Daten werden intern widergespiegelt, aber wenn sich die internen Daten ändern, ändern sich die externen Daten nicht.

Attribute sollten mit - verbunden werden und ihr Camel Case-Format sollte im Gültigkeitsbereich geschrieben werden.

Wenn der Attributname nicht über @attr angegeben wird, muss der lokale Name mit dem Namen des DOM-Attributs übereinstimmen.

<!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>

2, = (oder =attr)

Verwenden Sie = für die bidirektionale Datenbindung, und die Wertänderungen auf beiden Seiten werden auf der anderen Seite widergespiegelt. Da es sich um eine bidirektionale Bindung handelt, verwenden Sie nicht {{}}, da sonst in der folgenden Demo ein Fehler gemeldet wird.

Attribute sollten mit - verbunden werden und ihr Camel Case-Format sollte im Gültigkeitsbereich geschrieben werden.

Wenn der Attributname nicht über @attr angegeben wird, muss der lokale Name mit dem Namen des DOM-Attributs übereinstimmen.

<!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>

3, & (oder &attr)

& wird zum Binden externer Funktionen verwendet.

Attribute sollten mit - verbunden werden und ihr Camel Case-Format sollte im Gültigkeitsbereich geschrieben werden.

Wenn der Attributname nicht über @attr angegeben wird, muss der lokale Name mit dem Namen des DOM-Attributs übereinstimmen.

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

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Unterschiede von @, = und Anweisungen in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Was ist der Unterschied zwischen == und === in jsNächster Artikel：Was ist der Unterschied zwischen == und === in js

In Verbindung stehende Artikel

Mehr sehen