Directive, I understand it as a way for AngularJS to manipulate HTML elements.
Since the first step in learning AngularJS is to write the built-in instruction ng-app to indicate that the node is the root node of the application, instructions are already familiar.
This log simply records some built-in instructions, first use it, and then talk about some interesting things.
Built-in commands
All built-in directives have ng prefixes, and it is not recommended to use this prefix for custom directives to avoid conflicts.
Start with some common built-in instructions.
First, list some key built-in instructions and briefly talk about scope issues.
ng-model
This explanation does not seem to be correct when binding the form control to the properties of the current scope.
But don't worry about being chewy, it's easy to understand when using, for example:
The code copy is as follows:
<input type="text" ng-model="someModel.someProperty" /><br>
{{someModel.someProperty}}
ng-init
This directive is called initialized internal scope.
This instruction usually appears in smaller applications, such as giving a demo or something...
The code copy is as follows:
<div ng-init="job='fighter'">
I'm a/an {{job}}
</div>
Besides ng-init, we have more and better options.
ng-app
Every time you use AngularJS, this command is inseparable from it. By the way, $rootScope is included.
Declares the ng-app element to become the starting point of $rootScope, which is the root of the scope chain, which is usually declared in <html> you understand.
That is to say, it can be accessed by the scope under the root.
However, it is not recommended to overuse $rootScope to avoid global variables flying all over the sky, making the efficiency poor and difficult to manage.
Here is an example:
The code copy is as follows:
<html ng-app="myApp">
<body>
{{ someProperty }}
</body>
<script>
var myApp = angular.module('myApp', [])
.run(function($rootScope) {
$rootScope.someProperty = 'hello computer';
});
</script>
</html>
ng-controller
We use this instruction to install controller on a DOM element.
A controller? Indeed, it is good to understand this literally, so why do we need a controller?
Remember that when AngularJS 1.2.x, you can also define controllers like this...
The code copy is as follows:
function ohMyController($scope) {
//...
}
This method is prohibited in AngularJS 1.3.x because this method will make controllers fly all over the sky, and you can't tell the difference between levels and everything is hung on $rootScope...
The ng-controller must have an expression as a parameter, and in addition, the methods and properties of the previous $scope are inherited through $scope, and $rootScope is also included.
The following is just a simple example, ancestor cannot access the scope of child.
The code copy is as follows:
<div ng-controller="AncestorController">
{{ ancestorName }}
{{ childName }}
<div ng-controller="ChildController">
{{ ancestorName }}
{{ childName }}
</div>
</div>
<script>
var myApp = angular.module('myApp', [])
.controller('ChildController', function($scope) {
$scope.childName = 'child';
})
.controller('AncestorController', function($scope) {
$scope.ancestorName = 'ancestor';
});
</script>
The scope problem is much more than that. Let's put it aside for now and continue to look at other built-in instructions.
ng-form
At first I didn't understand why there was a form command, and the <form> tag felt enough.
Taking form verification as an example, there is a piece of code in the previous article:
The code copy is as follows:
<input type="submit" ng-disabled="mainForm.$invalid" />
That is, when the form's status is $invalid, the submit button is disabled.
If the scene is a little more complicated, for example, there are multiple child forms in a parent form, and the parent form can be submitted when 3 of the child form passes the verification.
However, <form> cannot be nested.
Considering this scenario, we use the ng-form directive to solve this problem.
For example:
The code copy is as follows:
<form name="mainForm" novalidate>
<div ng-form="form1">
Name:<input type="text" ng-required="true" ng-model="name"/><br>
ID number:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="idnum"/>
</div>
<br>
<div ng-form="form2">
Guardian name:<input type="text" ng-required="true" ng-model="gname"/><br>
Guardian ID number:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="gidnum"/>
</div>
<button ng-disabled="form1.$invalid && form2.$invalid">submit all</button>
</form>
ng-disabled
For attributes like this that take effect as long as they appear, we can make it effective in AngularJS by returning the value true/false by the expression return value.
Disable form input fields.
The code copy is as follows:
<textarea ng-disabled="1+1==2">1+1=?</textarea>
ng-readonly
Set the form input field to read-only by returning the value true/false by the expression.
Make an example, and it becomes read-only after 3 seconds.
The code copy is as follows:
<input type="text" ng-readonly="stopTheWorld" value="stop the world after 3s"/>
.run(function($rootScope,$timeout){
$rootScope.stopTheWorld=false;
$timeout(function(){
$rootScope.stopTheWorld = true;
},3000)
})
ng-checked
This is for <input type="checkbox" />, such as...
The code copy is as follows:
<input type="checkbox" ng-checked="someProperty" ng-init="someProperty = true" ng-model="someProperty">
ng-selected
For use with <option> in <select>, example:
The code copy is as follows:
<label>
<input type="checkbox" ng-model="isFullStack">
I'm Full Stack Engineer
</label>
<select>
<option>Front-End</option>
<option>Back-End</option>
<option ng-selected="isFullStack">Full Stack !!!</option>
</select>
ng-show/ng-hide
Show/hide HTML elements according to the expression, note that it is hidden, not removed from the DOM, for example:
The code copy is as follows:
<div ng-show="1+1 == 2">
1+1=2
</div>
<div ng-hide="1+1 == 3">
you can't see me.
</div>
ng-change
It's not HTML's onXXX or something, but ng-XXX.
Use in combination with ng-model, taking ng-change as an example:
The code copy is as follows:
<input type="text" ng-model="calc.arg" ng-change="calc.result = calc.arg*2" />
<code>{{ calc.result }}</code>
Or, for example, ng-options
{{}}
In fact, this is also a directive. Maybe it feels similar to ng-bind, but it may be seen when the page renders slightly slower.
In addition, the performance of {{}} is far less than ng-bind, but it is very convenient to use.
ng-bind
The behavior of ng-bind is similar to {{}}, except that we can use this instruction to avoid FOUC (Flash Of Unrendered Content), that is, flicker caused by unrendering.
ng-cloak
ng-cloak can also solve FOUC for us. ng-cloak hides internal elements until the route calls the corresponding page.
ng-if
If the expression in ng-if is false, the corresponding element will be removed from the DOM instead of being hidden, but when reviewing the element, you can see that the expression becomes a comment.
If the phase is hidden, you can use ng-hide.
The code copy is as follows:
<div ng-if="1+1===3">
This element cannot be reviewed
</div>
<div ng-hide="1+1==2">
Can be reviewed
</div>
ng-switch
It doesn't matter if you use it alone, here are examples:
The code copy is as follows:
<div ng-switch on="1+1">
<p ng-switch-default>0</p>
<p ng-switch-when="1">1</p>
<p ng-switch-when="2">2</p>
<p ng-switch-when="3">3</p>
</div>
ng-repeat
I don't understand that it is not called iterate. In short, it is to traverse the collection and generate template instances for each element. Some special attributes can be used in the scope of each instance, as follows:
The code copy is as follows:
$index
$first
$last
$middle
Even
odd
Without having to explain it specifically, it is easy to see what these are for. Here is an example:
The code copy is as follows:
<ul>
<li ng-repeat="char in
[{'alphabet': 'K'},
{'alphabet': 'A'},
{'alphabet': 'V'},
{'alphabet': 'L'},
{'alphabet': 'E'},
{'alphabet': 'Z'}] " ng-show="$even">{{char.alphabet}}</li>
</ul>
ng-href
At first I made an ng-model in a text field and then wrote it in href like this.
In fact, there is no difference between href and ng-href, so we can try this:
The code copy is as follows:
<ul ng-init="myHref=''">
<li><a ng-href="{{ myHref }}">{{linkText}}</a></li>
<li><a href="{{ myHref }}">Click, but not necessarily the correct address</a></li>
</ul>
.run(function($rootScope, $timeout) {
$rootScope.linkText = 'Not loaded yet, you cannot click';
$timeout(function() {
$rootScope.linkText = 'Please click'
$rootScope.myHref = 'http://google.com';
}, 2000);
})
ng-src
The same is true, that is, the resource should not be loaded before the expression takes effect.
Example (ps: The picture is good!):
The code copy is as follows:
<img ng-src="{{imgSrc}}"/>
.run(function($rootScope, $timeout) {
$timeout(function() {
$rootScope.imgSrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}, 2000);
})
ng-class
Dynamically change class styles with objects in scope, for example:
The code copy is as follows:
<style>
.red {background-color: red;}
.blue {background-color: blue;}
</style>
<div ng-controller="CurTimeController">
<button ng-click="getCurrentSecond()" >Get Time!</button>
<p ng-class="{red: x%2==0,blue: x%2!=0}" >Number is: {{ x }}</p>
</div>
.controller('CurTimeController', function($scope) {
$scope.getCurrentSecond = function() {
$scope.x = new Date().getSeconds();
};
})
The above is all the content described in this article, I hope you like it.