Description and usage of modifiers when direve ve declares a scope object in angularjs

Description and usage of modifiers when direve ve declares a scope object in angularjs

When we define the directive method in angular, we can see that

return {    restrict: 'AE',    scope: {},    template: '',    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: '&'}

Suppose our hml code is as follows:

Part of the corresponding controller code

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 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.