To angular we define the directive method. View
return { restrict: ' AE ', scope: {}, Template: ' <div></div> ', link:function () {}}
In addition to the properties that appear in the code, other properties are available for configuration and are not detailed here.
The focus of our talk today is the scope field.
General use method settings
Scope: { name: ' = ', age : ' = ', sex: ' @ ', say: ' & '}
If our HML code such as the following
<div my-directive name= "MyName" age= "MyAge" sex= "male" say= "Say ()" ></div>
The corresponding controller part code
function Controller ($scope) { $scope. Name = ' Pajjket '; $scope. Age =; $scope. Sex = ' I am a man '; $scope. Say = function () { alert (' Hello, I am popup message '); }
So what are the meanings of these modifiers and how do they relate to each other?
"=": The value of the attribute in the directive is the value of the property on the corresponding $scope in the controller, which can be used for the binding of bidirectional data
"@": the value in the instruction is the literal/Direct amount in HTML, and the binding of the local scope property to the DOM attribute is established. Because the property value is always string type. So this value always returns a string.
Assuming that the property name is not specified by @attr, then the local name will be associated with the name of the DOM attribute. For example, <widget my-attr= "Hello {{name}}" >,widget scope is defined as: {localname: ' @myAttr '}. Then, the localname of the widget scope property maps the true value after the conversion of "Hello {{name}}". When the Name property value is changed, the LocalName property of the widget scope also changes accordingly (one-way only, different from the following "="). The Name property is read from the parent scope (not the component scope)
"&": The value in the instruction is the attribute on the corresponding $scope in Contoller. However, this property must be a callback for a function
Copyright notice: This article Bo Master original article. Blog, not reproduced without consent.
Angularjs in directive declares scope describes when and how to use object modifiers