Home > Developer > Web Develop
1, index.html:
<! DOCTYPE html>
<title>scopeEqual</title>
<meta charset= "Utf-8" >
<link rel= "stylesheet" href= ". /css/bootstrap.css ">
<script src= ". /js/angular.js "></script>
<body>
<!--below is the instruction scope scope = symbol DEMO. -
<div ng-controller= "Myctrl" >
<label for= "" class= "Control-label" > Controller contents:</label>
<input type= "text" ng-model= "Ctrlflavor"/>
<label for= "" class= "Control-label" > Instruction content:</label>
<drink flavor= "Ctrlflavor" ></drink>
</div>
<script src= "./scopeequal.js" ></script>
</body>
2, Scopeequal.js:
var mymodule = angular.module ("App", []);
Mymodule.controller (' Myctrl ', [' $scope ', function ($scope) {
$scope. Ctrlflavor = "Pepsi Tatsu";
}]);
Mymodule.directive (' Drink ', function () {
return {
Restrict: ' AE ',
scope:{
FLA: ' =flavor '//or the property values within the same tag can form two-way data binding. In the independent scope is also the value in the Ng-model, in order to form a bidirectional ng-model data binding in the form of assignment must be used = Assign attribute value to NG-MODEL. FLA is a Ng-model value, and the Tag property flavor gets the value assigned in the controller
},
Template: ' <input type= ' text ' ng-model= ' fla '/> ',
Link:function (Scope, elm, attrs) {
SCOPE.FLA = scope.ctrlflavor;//This writes although the initial value in the controller can be assigned to the FLA in the Ng-model= "Fla", but with the ng-model= "Ctrlflavor" in the previous input Cannot form two-way data binding, that is, you and I are independent, non-interference, do not affect each other, so to achieve two-way data binding, but also through the scope: the inside of the equal sign "=" two-way binding mechanism
// }
}
});
[email protected] Independent scope scope binding policy = character policy
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
