AngularJS directive _ AngularJS

Source: Internet
Author: User
AngularJS commands are used to expand HTML. This article introduces AngularJS commands in the AngularJS getting started tutorial. If you are interested, you can learn about them. HTML has many attributes. For example, the href attribute of a tag can be used to specify the URL of a link, The type attribute of the tag can be used to specify the input type. AngularJS commands are used to add functions to AngularJS applications by extending HTML attributes.

AngularJS commands are used to expand HTML. These are all special attributes starting with the ng-prefix. We will discuss the following commands:

Commonly used AngularJS commands

The ng-app command initializes an AngularJS application.

The ng-init command initializes application data.

The ng-model command binds the element value (for example, the value of the input field) to the application.

Ng-app command

The ng-app command starts an AngularJS application. It defines the root element. It automatically initializes or starts applications that load web pages containing AngularJS applications. It is also used to load AngularJS applications of various AngularJS modules. In the following example, the default AngularJS application uses the ng-app attribute of the p element.

...

Ng-init command

The ng-init command initializes the data of an AngularJS application. It is used to set the variables used in the application. In the following example, the countries array is initialized. Use the JSON syntax to define the countries array.

...

Ng-model command

The ng-model command defines the model/variable used in AngularJS applications. In the following example, we define a model named "name.

...

Enter your Name:

Ng-repeat command

The ng-repeat command repeats every item in the html Element Set. In the example below, we have iterated the array countries.

...

List of Countries with locale:

  1. {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}

AngularJS command example

In the input box, try to enter:

Name:

You entered: {firstName }}

Ng-app Command tells AngularJS current

The element is an AngularJS application. The ng-init command is used to initialize data, which is equivalent to defining variables in javascript. Data Binding in AngularJS synchronizes AngularJS expressions with AngularJS data. {FirstName} is synchronized through ng-model = "firstName. The above example will synchronously display the content you entered in the input box on the page.

Note:

A web page can contain multiple AngularJS applications running in different elements.
Using ng-init to initialize data is not very common. You will learn a better way to initialize data in subsequent chapters.

Ng-repeat command

The ng-repeat command repeats an HTML element, which is equivalent to an each loop in javascript.

Use ng-repeat to loop the Array

  • {X }}

The above example will be parsed into the following HTML

 
 
  • Jani
  • Hege
  • Kai

Ng-repeat acts on the object array:

Loop object:

  • {X. name + ',' + x. country }}

It will be parsed into the following HTML:

 
 
  • Jani, Norway
  • Hege, Sweden
  • Kai, Denmark

Custom commands

In addition to the built-in commands of AngularJS, we can also create custom commands. You can use the. directive function to add custom commands. To call a custom command, you must add a custom command name to the HTMl element. Use the camper method to name an instruction, askh5Directive, but when using it, it needs to be separated by-: askh5-directive

Script var app = angular. module ("myApp", []); app. direve ve ("askh5direve ve", function () {return {template: "Custom command! "};}); Script

The preceding example is parsed as follows:

Custom commands!

You can call commands in the following ways:

Element name:

Attribute:


Class Name:


Note:

Restrict

The restrict value can be:

E. Only element names are allowed.

A is only applicable to attributes.

C is only applicable to Class names.

M is only applicable to comments.

The default restrict value is EA, that is, the command can be called through the element name and attribute name.

Var app = angular. module ("myApp", []); app. directive ("askh5Directive", function () {return {restrict: "A", template: "Custom command! "};});

The AngularJS above will only allow attribute calls.

Related reading:

AngularJS expression in AngularJS getting started tutorial

The above content is the AngularJS instruction for getting started with AngularJS, which I hope to help you!

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.