Eine kurze Diskussion über die Unterschiede von @, = und Anweisungen in Angular-js-Tutorial-php.cn

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

青灯夜游

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

nach vorne

2835 Leute haben es durchsucht

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.

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

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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.

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

Nach dem Login kopieren

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!