scope: When false, the son inherits the value of the father, changes the value of the father, and the value of the son also changes, and vice versa . ( inheritance is not isolated )
scope: When true, the son inherits the father's value, changes the father's value, the son's value changes accordingly, but changes the son's value, the father's value remains unchanged . ( inheritance isolation )
scope: Creates the scope of the directive, which is passed as an attribute tag in the directive. Scope is a necessary condition for creating reusable directives, each directive (no matter what level of nested directives it is in) has its own unique scope that does not depend on the parent scope. The scope object defines the names and types variables. The above example creates 3 scope variables.
name: "@" (pass by value, one-way binding): The "@" symbol indicates that the variable is passed by value . The directive retrieves the value in the string passed from the parent scope. Instructions can use this value but cannot modify it and are the most commonly used variables.
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<drink flavor="{{ctrlFlavor}}"></drink>
</div>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="ScopeAt.js"></script>
</html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="Budweiser 111";
}]);
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
flavor:'@'
},
template:"<div>{{flavor}}</div>"
,
link:function(scope,element,attrs){
//scope.flavor=attrs.flavor;
console.log(scope.flavor);
}
}
});
amount: "=" (reference, two-way binding): The "=" symbol indicates that the variable is passed by reference . The instruction retrieves the reference value in the main scope. Values can be of any type, including composite objects and arrays. Directives can change the value in the parent Scope, so we need to use this type when the directive needs to modify the value in the parent Scope.
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"> </head> <body> <div ng-controller="MyCtrl"> Ctrl: <br> <input type="text" ng-model="ctrlFlavor"> <br> Directive: <br> <drink flavor="ctrlFlavor"></drink> </div> </body> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="ScopeEqual.js"></script> </html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="Budweiser";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
flavor:'='
},
template:'<input type="text" ng-model="flavor"/>'
}
});
save: "&" (expression) : The "&" symbol indicates that the variable is an expression that is invoked in the parent scope . It allows instructions to perform more advanced operations than modifying values. (As long as it is a method call, it can only be modified with the ampersand)
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"> </head> <body> <div ng-controller="MyCtrl"> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> </div> </body> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="ScopeAnd.js"></script> </html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.sayHello=function(name){
alert("Hello "+name);
}
}])
myModule.directive("greeting", function() {
return {
restrict:'AE',
scope:{
greet:'&'
},
template:'<input type="text" ng-model="userName" /><br/>'+
'<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
}
});
Remarks: Only when the method inside the instruction is the same as the name of the property of the control using the instruction, the "&" symbol can be used directly without specifying the property.
Case 2: Monitor ng-repeat to trigger custom functions and events when conditions are met
angular.module("klwkOmsApp").directive("repeatFinishedDirective", function($timeout){
return {
restrict: 'A',
scope:{
condition:"@",
myaction:"&repeataction",
"repeatIndex":"@"
},
controller:function($scope){
},
link: function(scope, element, attr) {
// If the query condition is true, the event will be triggered
if (attr.condition == "true") {
$timeout(function() {
// trigger event
scope.$emit('conditionCallback');
// handle custom method
scope.myaction();
});
}
}
}
});
Use the command:
<ul >
<li ng-repeat="item in list" repeat-finished-directive repeataction="initFunc()" repeatIndex="{{$index}}" condition="{{item == 'liumei' || $last == true}}">
{{$index}} ---- {{item}} ---- {{$last}}----{{$first}}
</li>
</ul>
Note the following:
1. The myaction attribute in the scope of the instruction is a method inside the instruction. The name is customized and can be written casually.
2. The value corresponding to the instruction scope is "&repeataction", because the defined attribute is inconsistent with the key "myaction" in the scope .
3. Because html is case-insensitive, the repeataction attribute should be all lowercase. If "CamelCase" is used, for example: repeatAction="initFunc()", the scope is still inside the instruction: { myaction:" &repeataction" }