Friends who are familiar with HTML know that HTML has many attributes. For example, the href attribute of the tag can be used to specify the URL address of the link, and the type attribute of the tag can be used to specify the type of input. AngularJS directives add functionality to AngularJS applications by extending HTML attributes.
AngularJS directives are used to extend HTML. These are special properties starting with the ng- prefix. We will discuss the following directives:
Common AngularJS commands
Theng-app directive initializes an AngularJS application.
The ng-init directive initializes application data.
Theng-model directive binds element values (such as the value of an input field) to the application.
ng-app directive
Theng-app directive starts an AngularJS application. It defines the root element. It automatically initializes or starts the application that loads the web page containing the AngularJS application. It is also used to load various AngularJS modules into AngularJS applications. In the example below, we define the default AngularJS application using the ng-app attribute of the div element.
<div ng-app=""> ... </div>
ng-init command
The ng-init directive initializes the data of an AngularJS application. It is used to put values into variables used in applications. In the following example, we will initialize the countries array. Use JSON syntax to define the countries array.
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
...
</div>ng-model directive
ng-model directive defines models/variables used in AngularJS applications. In the example below, we define a model named "name".
<div ng-app=""> ... <p>Enter your Name: <input type="text" ng-model="name"></p> </div>
ng-repeat directive
Theng-repeat directive repeats each item in a collection of html elements. In the example below, we have iterated over the array countries.
<div ng-app="">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>AngularJS directive example
<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>
</div> ng-app directive tells AngularJS that the current
Attention
A web page can contain multiple AngularJS applications running in different elements.
It's not very common to use ng-init to initialize data. You'll learn a better way to initialize data in subsequent chapters.
ng-repeat directive
The ng-repeat directive will repeat an HTML element, which is equivalent to the each loop in JavaScript
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>The above example will be parsed into the following HTML
<ul> <li>Jani</li> <li>Hege</li> <li>Kai</li> </ul>
ng-repeat works on object arrays:
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>will be parsed into the following HTML:
<ul> <li>Jani, Norway</li> <li>Hege, Sweden</li> <li>Kai, Denmark</li> </ul>
Custom command
In addition to AngularJS’s built-in directives, we can also create custom directives. You can add custom directives using the .directive function. To call a custom directive, the custom directive name needs to be added to the HTMl element. Use camelCase to name a directive, askh5Directive, but need to be separated by - when using it: askh5-directive
<body ng-app="myApp">
<askh5-directive></askh5-directive>
<script>
var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>The above example parses into:
Instructions can be called in the following ways:
Element name:
Attribute:
Class name:
Comment:
restrict use
restrict value can be the following:
E can only be used in element names
A only available for attributes
C can only be used with class names
M only for comments
The default value of restrict is EA, that is, the instruction can be called through the element name and attribute name.
var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});AngularJS above will only allow property calls.
Related reading:
AngularJS introductory tutorial - AngularJS expressions
The above content is the AngularJS instructions of the AngularJS introductory tutorial introduced by the editor. I hope it will be helpful to everyone!
The difference between sqlserver and mysql
How to check dead links on your website
What does java routing mean?
Usage of fixed in c language
What is the difference between blocking and deleting on WeChat?
What are the static code checking tools?
How many years do you have to pay for medical insurance to enjoy lifelong medical insurance?
How to set up virtual memory
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
