Home > Developer > Web Develop
Pick up an article
When we say "=" binding, we then "@" bind:
If you read my understanding of the "=" binding, the reader must know that there is a "bridge" in my understanding, if you do not know, please read my previous post: http://1730634.blog.51cto.com/1720634/1661748
First look at the case:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<body>
<div>
<input type= "text" ng-model= "Color"Placeholder=" Enter a Color "/>
<bind-propertyColor-prop="{{Color}} "></bind-property>
<bind-propertyColor-prop="Color"></bind-property>
<bind-propertyColor-prop="color ()"></bind-property>
</div>
</body>
<script type= "Text/javascript" src= ". /framework/angular.js "></script>
<script type= "Text/javascript" src= ". /js/[email protected] "></script>
content in [email protected]:
var mymodule = angular.module ("MyModule", []);
Mymodule.directive ("BindProperty", function () {
return {
scope:{
tcolor : "@colorprop "
},
restrict: ' E ',
template: "<input type= ' text ' ng-model= ' tcolor ' style= ' Background-color:{{tcolor }} '/> ",
replace:true
};
});
The above code is already very clear, write a bind-property instruction, binding instruction variable tcolor to the color variable in the template, @ binding is a single binding, only the color value changes will cause Changes in TColor . And I wrote a few more bind-property instructions, directly assigning the string "color" and "Color ()", both strings and color a little relationship, Does not change as it changes, because I do not bind it to a color defined in "ng-model="color"", only "{{color}}" is called Read in MyModule The value of color
OK, speaking of here also said almost, if you feel a little bit around, then go to see my understanding of the "=" binding, and then copy the code to the local test, many modifications to deepen understanding.
One thing to add: shorthand and the blog post are the same way
This article is from the "General Programmer to CTO" blog, please be sure to keep this source http://1730634.blog.51cto.com/1720634/1661750
ANGULARJS custom Directive Binding policy---' @ ' binding
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
