Angularjs in directive declares scope describes when and how to use object modifiers

Source: Internet
Author: User
Tags modifiers

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.