angularjs 명령 의 바 인 딩 정책(@,=,&)

테마 배경 도입:angular 명령 설정 의 template 는 하 드 인 코딩 으로 해당 하 는 코드 를 직접 쓸 수 있 지만 변수 에 따라 동적 으로 업데이트 할 수 있 습 니 다.그러면 그 변 수 를 사용 해 야 합 니 다.용법 이 다 르 기 때문에 적당 한 바 인 딩 정책 을 설정 해 야 합 니 다.
1:지령 역 scope 의@
나 는 설명 이 매우 힘들다 고 생각한다.직접 코드 로 설명 한다.
AngularJS.html


<!doctype html> 
<html ng-app='myApp'> 
 <head>  
 
 </head> 
 <body>  
 
 <div ng-controller="listCtrl">  
 <input type="text" ng-model="t" /> 
  <kid title="{{t}}" > //       ，   title    scope @   ，t     scope   
  <span>  angularjs</span> 
 </kid> 
</div> 
<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="main05.js"></script> 
</body></html>

main05.js


var myApp=angular.module('myApp',[]); 
myApp.controller('listCtrl',function($scope){ 
 $scope.logchore="motorola"; 
}); 
 
 
myApp.directive('kid',function(){ 
 return { 
  'restrict':'E', 
  scope:{ 
   title:"@" 
  }, 
  template:'<div >{{title}}</div>' 
   
 } 
});

입력 상자 에 숫자 를 입력 하면 명령 템 플 릿 의 title 에 연 결 됩 니 다.
2:Scope 얘 기 하 자 면=
angularjs.html


<!doctype html> 
<html ng-app='myApp'> 
 <head>  
 
 </head> 
 <body>  
 
 <div ng-controller="listCtrl">  
 <input type="text" ng-model="t" /> 
  <kid title="t" > //     ，        scope   t  
  <p>{{title}}</p> 
  <span>  angularjs</span> 
 </kid> 
</div> 
<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="main05.js"></script> 
</body></html>

main05.js 코드 는 다음 과 같 습 니 다.


var myApp=angular.module('myApp',[]); 
myApp.controller('listCtrl',function($scope){ 
 $scope.logchore="motorola"; 
}); 
 
 
myApp.directive('kid',function(){ 
 return { 
  'restrict':'E', 
  scope:{ 
   title:"=" 
  }, 
  template:'<div >{{title}}</div>' 
   
 } 
});

3:마지막 으로&,이것 은 방법 으로 호출 된 것 이다.
angularjs.html 코드 는 다음 과 같 습 니 다.


<!doctype html> 
<html ng-app='myApp'> 
 <head>  
 
 </head> 
 <body>  
 
 <div ng-controller="listCtrl">  
  <kid flavor="logchore()" ></kid> //  =，       ， logchore      scope       
</div> 
<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="main05.js"></script> 
</body></html>

main05.js 코드 는 다음 과 같 습 니 다.


var myApp=angular.module('myApp',[]); 
myApp.controller('listCtrl',function($scope){ 
 $scope.logchore=function(){ 
  alert('ok'); 
 }; 
}); 
 
 
myApp.directive('kid',function(){ 
 return { 
  'restrict':'E', 
  scope:{ 
   flavor:"&" 
  }, 
  template:'<div ><button ng-click="flavor()"></button></div>' 
   
 } 
});

logchore 에 인자 가 있 으 면,
angularjs.html 코드 는 다음 과 같 습 니 다.


<!doctype html> 
<html ng-app='myApp'> 
 <head>  
 
 </head> 
 <body>  
 
 <div ng-controller="listCtrl">  
 
  <kid flavor="logchore(t)" ></kid> 
 
</div> 
<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="main05.js"></script> 
</body></html>

main05.js 코드 는 다음 과 같 습 니 다.


var myApp=angular.module('myApp',[]); 
myApp.controller('listCtrl',function($scope){ 
 $scope.logchore=function(x){ 
  alert(x); 
 }; 
}); 
 
 
myApp.directive('kid',function(){ 
 return { 
  'restrict':'E', 
  scope:{ 
   flavor:"&" 
  }, 
  template:'<div > <input type="text" ng-model="v" /> <button ng-click="flavor({t:v})"></button></div>' 
   
 } 
});

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

SpringMvc+Angularjs 멀티 파일 대량 업로드

SpringMvc 코드 jar 가방 commons-fileupload commons-io spring-mvc.xml 구성 Controller 로컬 저장 AngularJs 코드 Form 양식 커밋 위에서 말한 것은 여...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

angularjs 명령 의 바 인 딩 정책(@,=,&)

좋은 웹페이지 즐겨찾기