SoFunction
Updated on 2025-04-12

Detailed explanation of the difference between the ‘& ’’=’ ‘@’ symbols in directive

We have several criteria for judging the quality of an Html5 framework, which is lightweight, expandable, easy to reuse, and fast.

Angular is a pretty good choice to display component reuse to developers in the form of directive. As a UI component, there must be data interaction.

Then we must have some understanding of the several symbols in the data interaction process and what are their differences to prevent us from making mistakes during the application process.

1. First, let's look at the use of @ below scope scope:

html

<!doctype html> 
<html ng-app='myApp'>  
 <head>   

 </head>  
 <body>    

 <div ng-controller="listCtrl">   
  <input type="text" ng-model="t" /> 
   <test title="{{t}}" > 
    <span>mineangularjs</span> 
  </test> 
</div>  
<script type="text/javascript" src=""></script> 
<script type="text/javascript" src=""></script> 
</body></html>

js

var myApp=('myApp',[]); 
('listCtrl',function($scope){ 
  $="motorola"; 
}); 


('test',function(){ 
  return { 
    'restrict':'E', 
    scope:{ 
      title:"@" 
    }, 
    template:'<div >{{title}}</div>' 

  } 
});

This must be specified. The title here is the @ corresponding to the scope in the command, and t is under the control domain scope.

2. Use of =.

html

&lt;!doctype html&gt; 
&lt;html ng-app='myApp'&gt;  
 &lt;head&gt;   

 &lt;/head&gt;  
 &lt;body&gt;    

 &lt;div ng-controller="listCtrl"&gt;   
  &lt;input type="text" ng-model="t" /&gt; 
   &lt;test title="t" &gt; 
    &lt;p&gt;{{title}}&lt;/p&gt; 
    &lt;span&gt;mineangularjs&lt;/span&gt; 
  &lt;/test&gt; 
&lt;/div&gt;  
&lt;script type="text/javascript" src=""&gt;&lt;/script&gt; 
&lt;script type="text/javascript" src=""&gt;&lt;/script&gt; 
&lt;/body&gt;&lt;/html&gt;

js

var myApp=('myApp',[]); 
('listCtrl',function($scope){ 
  $="motorola"; 
}); 


('test',function(){ 
  return { 
    'restrict':'E', 
    scope:{ 
      title:"=" 
    }, 
    template:'<div >{{title}}</div>' 

  } 
});

Compared with @ above, this direct assignment is equal to t under scope field.

3. It is best to look at the use of the & symbols

html

<!doctype html> 
<html ng-app='myApp'>  
 <head>   

 </head>  
 <body>    

 <div ng-controller="listCtrl">   
   <test flavor="logchore()" ></test> 
</div>  
<script type="text/javascript" src=""></script> 
<script type="text/javascript" src=""></script> 
</body></html>

js

var myApp=('myApp',[]); 
('listCtrl',function($scope){ 
  $=function(){ 
    alert('ok'); 
  }; 
}); 


('test',function(){ 
  return { 
    'restrict':'E', 
    scope:{ 
      flavor:"&"  
    }, 
    template:'<div ><button ng-click="flavor()"></button></div>' 

  } 
});

Try it and you will understand, it will be concise and clear!

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.