Introducing theme background: The template in the angular command configuration can be written directly using hard code, but it can also be updated dynamically based on variables. Then those variables need to be used. Due to the different usages, appropriate binding strategies need to be set.
1: Let's talk about the @ of the instruction domain scope first
I think the description is very difficult, so I directly use the code to explain it:
<!doctype html>
<html ng-app='myApp'>
<head>
</head>
<body>
<div ng-controller="listCtrl">
<input type="text" ng-model="t" />
<kid title="{{t}}" > //This must be specified. The title here is the @ corresponding to the scope in the command. t is under the control domain scope <span>mineangularjs</span>
</kid>
</div>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
</body></html>
var myApp=('myApp',[]);
('listCtrl',function($scope){
$="motorola";
});
('kid',function(){
return {
'restrict':'E',
scope:{
title:"@"
},
template:'<div >{{title}}</div>'
}
});
Entering numbers in the input box will be bound to the title of the instruction template.
2: Let’s talk about Scope’s =
<!doctype html>
<html ng-app='myApp'>
<head>
</head>
<body>
<div ng-controller="listCtrl">
<input type="text" ng-model="t" />
<kid title="t" > //Compared with the above, this direct assignment is equal to t in the scope field <p>{{title}}</p>
<span>mineangularjs</span>
</kid>
</div>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
</body></html>
The code is as follows:
var myApp=('myApp',[]);
('listCtrl',function($scope){
$="motorola";
});
('kid',function(){
return {
'restrict':'E',
scope:{
title:"="
},
template:'<div >{{title}}</div>'
}
});
3: Finally, this is used for method calls
The code is as follows:
<!doctype html> <html ng-app='myApp'> <head> </head> <body> <div ng-controller="listCtrl"> <kid flavor="logchore()" ></kid> //First compare =, the form of function assignment, and the logchore function must be a function declared under the domain scope</div> <script type="text/javascript" src=""></script> <script type="text/javascript" src=""></script> </body></html>
The code is as follows:
var myApp=('myApp',[]);
('listCtrl',function($scope){
$=function(){
alert('ok');
};
});
('kid',function(){
return {
'restrict':'E',
scope:{
flavor:"&"
},
template:'<div ><button ng-click="flavor()"></button></div>'
}
});
If logchore has parameters,
The code is as follows:
<!doctype html> <html ng-app='myApp'> <head> </head> <body> <div ng-controller="listCtrl"> <kid flavor="logchore(t)" ></kid> </div> <script type="text/javascript" src=""></script> <script type="text/javascript" src=""></script> </body></html>
The code is as follows:
var myApp=('myApp',[]);
('listCtrl',function($scope){
$=function(x){
alert(x);
};
});
('kid',function(){
return {
'restrict':'E',
scope:{
flavor:"&"
},
template:'<div > <input type="text" ng-model="v" /> <button ng-click="flavor({t:v})"></button></div>'
}
});
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.