AngularJS1.x学習ディレクティブの '&' '=' '@'記号の違いを説明する

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

良いまたは悪いHtml5フレームワークのために、我々は、軽量で、スケーラブルで、再利用しやすく、速く、判断するためのいくつかの基準を持っています。

これをコンポーネントのために再利用すると、指示が開発者に指示されます。これはかなり良い選択です。UIコンポーネントとして、データのやり取りが必要です。

次に、データのやりとりの過程でいくつかのシンボルが理解されていなければなりません。また、アプリケーションのプロセスで間違いを起こさないように、それらの違いは何かを理解する必要があります。

1.まずスコープスコープの下での@の使用を見てみましょう:

Html


<!doctype html> 
<html ng-app='myApp'>  
<head>   
</head>  
<body>    
<div ng-controller="listCtrl">   
<input type="text" ng-model="t" /> 
<test title="{{t}}" > 
<span>我的angularjs</span> 
</test> 
</div>  
<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="main.js"></script> 
</body></html> 

Js


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

これを指定する必要があります。タイトルは命令のスコープの対応する@です。tは制御ドメインスコープの下にあります。

2. =の使用。

Html


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

Js


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

上記の@と比較すると、この直接割り当てはスコープフィールドの下のtと同じです。

3.&記号の使用を見るのが最善です

Html


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

Js


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

それを試してください、あなたは理解し、簡潔で明確になります!


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ