각도에서 @, = 및 명령어의 차이점에 대한 간략한 설명-JS 튜토리얼-php.cn

각도에서 @, = 및 명령어의 차이점에 대한 간략한 설명

青灯夜游

풀어 주다： 2021-05-12 10:31:36

앞으로

2837명이 탐색했습니다.

이 글은 angular 지침에서 @, =, &의 차이점을 이해하는 데 도움이 될 것입니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

각도에서 @, = 및 명령어의 차이점에 대한 간략한 설명

【관련 추천: "angular Tutorial"】

지시문의 범위가 객체로 설정되면 지시문은 독립적인 범위를 가지며 AngularJS는 격리된 범위 간 통신에 사용되는 바인딩 전략을 제공합니다. 그리고 외부 범위.

1. @(또는 @attr)

단일 항목 데이터를 바인딩하려면 @ 기호를 사용하세요. 값은 항상 문자열이므로 {{}}를 사용하세요.

또한 이 역시 단방향 바인딩입니다. 외부 데이터가 변경되면 내부적으로 반영되지만, 내부 데이터가 변경되면 외부 데이터는 변경되지 않습니다.

속성은 -로 연결되어야 하며 범위에는 카멜 케이스 형식으로 작성해야 합니다.

@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: &#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, = (또는 =attr)

양방향 데이터 바인딩에 =를 사용하면 양쪽의 값 변경 사항이 반대쪽에 반영됩니다. 양방향 바인딩이므로 {{}}를 사용하지 마세요. 그렇지 않으면 다음 데모에서 오류가 보고됩니다.

속성은 -로 연결되어야 하며 범위에는 카멜 케이스 형식으로 작성해야 합니다.

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

로그인 후 복사

3, & (또는 &attr)

&는 외부 기능을 바인딩하는 데 사용됩니다.

속성은 -로 연결되어야 하며 범위에는 카멜 케이스 형식으로 작성해야 합니다.

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

로그인 후 복사

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 각도에서 @, = 및 명령어의 차이점에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!