Home > Developer > Web Develop
Description and usage of modifiers when direve ve declares a scope object in angularjs, angularjsdireve ve
When we define the directive method in angular, we can see that
return { restrict: 'AE', scope: {}, template: '<div></div>', link: function() {}}
In addition to the attributes in the Code, some other attributes are available for configuration, which are not described here.
Today, we will focus on the scope field.
General usage settings
scope: { name: '=', age: '=', sex: '@', say: '&'}
<div my-directive name="myName" age="myAge" sex="male" say="say()"></div>
Function Controller ($ scope) {$ scope. name = 'pajjket '; $ scope. age = 99; $ scope. sex = 'I am mal'; $ scope. say = function () {alert ('Hello, I am a pop-up message ');};}
So what are the meanings of these modifiers? How are they associated?
"=": The attribute value in the instruction is the value corresponding to the attribute value on $ scope in controller, which can be used for bidirectional data binding.
"@": The value in the command is the literal/Direct Volume in html. A local scope property is bound to the DOM property. Because the attribute value is always of the String type, this value always returns a String. If the attribute name is not specified through @ attr, the local name will be consistent with the DOM attribute name. For example, <widget my-attr = "hello {name}">, the scope of the widget is defined as: {localName: '@ myAttr '}. The localName of the widget scope property maps the "hello {name}" converted value. After the name attribute value changes, the localName attribute of the widget scope also changes accordingly (only one-way, different from "=" below ). The name attribute is read in the parent scope (not the component scope)
"&": The value in the instruction is the attribute corresponding to $ scope in Contoller, but this attribute must be a function callback.
<! Doctype html>
<Html ng-app = "App">
<Head>
<Script src = "angular. js"> </script>
</Head>
<Body>
<Form ng-controller = "Ctrl">
<Input type = "radio" ng-model = "phone" name = "phone" value = "Moto"> Moto
<Input type = "radio" ng-model = "phone" name = "phone" value = "Miui"> Miui <br>
<Button ng-click = "check ('0')"> select 1 </button>
<Button ng-click = "check ('1')"> select 2 </button> <br>
Value = {phone | json }}
</Form>
</Body>
<Script>
Var appModule = angular. module ('app', []);
AppModule. controller ('ctrl ', function ($ scope ){
$ Scope. phone = 'moto ';
$ Scope. check = function (number ){
If (number = 0 ){
$ Scope. phone = 'moto ';
} Else {
$ Scope. phone = 'miuis ';
}
};
});
</Script>
</Html>
How to Use angularjs to obtain the focus of a text box
You can write commands.
<! DOCTYPE html>
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
