Front to understand the concept of learning instruction via video, here to learn about the content of the instruction in scope.
Different binding independent scope, can be achieved more adaptive custom label. By binding properties of different binding rules to define the labels meet more application scenarios.
Benpian will summarize the following:
1 Why do we need a separate scopes
2 How to achieve independence Scope
3 Scope of Data Binding
This article was written error code replace repalce, may interfere with the normal coding, but also note that changes. I'm not here to modify!
Why do we need a separate scopes
For ease of understanding, a look at the following example:
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div>
<xingoo></xingoo>
<xingoo></xingoo>
<xingoo></xingoo>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.directive("xingoo",function(){
return {
restrict:'AE',
template:'<div><input type="text" ng-model="username"/>{{username}}</div><br>',
repalce:true
}
})
</script>
</body>
</html>We can see that in the script, create an instruction that implements a custom label.
Tag <xingoo> </ xingoo> is replaced with a role and a data input box.
This effect will appear the following:
analysis:
When you create a command of our own, this directive definitely can not only be used once, it is to be used repeatedly, and some within a page or a need to use multiple times within the controller.
This scenario is similar to the above, a change in any input box data, will lead to changes in other data with the label , which is obviously not what we want.
This time we need a separate scope of.
How to achieve independence Scope
Let's look at the scope of the independent effects:
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.directive("xingoo",function(){
return {
restrict:'AE',
scope:{},
template:'<div><input type="text" ng-model="username"/>{{username}}</div><br>',
repalce:true
}
})
</script>Only when defining instruction, add scope: {} This property, the label can have its own scope.
Just add this line of code only, on the realization of an independent scope.
When the input is performed, using their own data within each template, they do not interfere with each other.
Scope Data Binding
Custom label or extended, there is such a demand scenario, some of the attributes you want to add in the label, to achieve some complex functions.
On these attributes, the scope is independent of how to do it? Consider the following contents of it.
for example:
<xingoo say="name"></xingoo>
<xingoo say="name()"></xingoo>This hypothesis is passed above, how do we distinguish it passed in the end it is a variable? Or string it? Or a way to do that?
Therefore AngularJS With three custom scope binding way:
1 based on the string binding: using @ operator , content within double quotation marks as a string binding.
2 based on the variable of binding: = operator , content is bound to a variable.
3 based on the method of binding: & operator , when the content binding methods.
First look at the string-based binding:
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="myAppCtrl">
<xingoo say="test string"></xingoo>
<xingoo say="{{str2}}"></xingoo>
<xingoo say="test()"></xingoo>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller("myAppCtrl",['$scope',function($scope){
$scope.str1 = "hello";
$scope.str2 = "world";
$scope.str3 = "angular";
}]);
myAppModule.directive("xingoo",function(){
return {
restrict:'AE',
scope:{ say:'@' },
template:"<div>{{say}}</div><br>",
repalce:true
}
})
</script>
</body>
</html>Look at the code used in the body in three custom labels, each label inside the property have a say, this property bound to a string of double quotes.
In the definition of the instruction, adding scope: {say: '@' } key-value pair property, i.e., Angular say will recognize what is bound to a string .
In the template, using the expression {{say}} content output say indicated.
It can be seen content within double quotes are treated as a string. Of course, {{str2}} The expression is parsed into a corresponding content, and then as a string.
If the binding is a variable too!
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="myAppCtrl">
ctrl:<input type="text" ng-model="testname"><br>
directive:<xingoo name="testname"></xingoo>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller("myAppCtrl",['$scope',function($scope){
$scope.testname="my name is xingoo";
}]);
myAppModule.directive("xingoo",function(){
return {
restrict:'AE',
scope:{ name:'=' },
template:'<input type="text" ng-model="name">',
repalce:true
}
})
</script>
</body>
</html>In the above code, see
A controller myAppCtrl corresponding div, the definition of a variable ng-model - testname.
2 testname is a value corresponding to the input box.
3 this variable is then passed as a parameter to the tag name attribute xingoo.
4 xingoo tab, this name again bound to an input box template.
Content of the final two input box is connected, regardless of the values which change in the input box, and the testname name will change.
This can be seen by the following chart:
By scope specified say binding rules in the directive is binding, variable.
The final connection attribute dependencies in xingoo testname tag name together with:
Finally, the method is based on binding: & operator
Based on the above it shows the binding strings and variables, look at the following methods based on the binding:
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="myAppCtrl">
<xingoo say="sayHello(name)"></xingoo>
<xingoo say="sayNo(name)"></xingoo>
<xingoo say="sayYes(name)"></xingoo>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller("myAppCtrl",['$scope',function($scope){
$scope.sayHello = function(name){
console.log("hello !"+ name);
};
$scope.sayNo = function(name){
console.log("no !"+ name);
};
$scope.sayYes = function(name){
console.log("yes !"+ name);
};
}]);
myAppModule.directive("xingoo",function(){
return {
restrict:'AE',
scope:{
say:'&'
},
template:'<input type="text" ng-model="username"/><br>'+
'<button ng-click="say({name:username})">click</button><br>',
repalce:true
}
})
</script>
</body>
</html>The binding rules in the scope of this code into a &, which is binding method.
In the body, passed through custom label three methods, namely, sayHello (name), sayNo (name), sayYes (name), these three methods require a variable name.
In the definition of the instruction, a template replaced input box, a button:
Input box: an input username, i.e. the method requires three argument name.
Button: Click to trigger function - through binding rules, to bind to the appropriate method.
That
Is defined by the scope of say, angular know say a corresponding method;
By {name: username} associated know that the incoming username.
Thereby performing the method corresponding to.
Results page:
reference
[1] desert poor demand, AngularJS combat: http: //www.imooc.com/video/3085/0
Reproduced in: https: //my.oschina.net/u/204616/blog/545162