AngularJS built-in directive_AngularJS

directive, I understand it as a way for AngularJS to operate HTML elements.
Since the first step in learning AngularJS is to write the built-in directive ng-app to indicate that this node is the root node of the application, the directive is already familiar.

This blog briefly records some built-in commands. Let’s use them first, and then talk about some interesting things.

Built-in commands

All built-in instructions are prefixed with ng. It is not recommended for custom instructions to use this prefix to avoid conflicts.
Start with some common built-in commands.
Let’s first list some key built-in instructions, and briefly talk about scope issues.

ng-model

Binding the form control to the properties of the current scope does not seem to be correct.
But don’t worry about the wording for now, it’s easy to understand when used, for example:

Copy code The code is as follows:

{{someModel.someProperty}}

ng-init

This directive will initialize the inner scope when called.
This command usually appears in relatively small applications, such as giving a demo or something...

Copy code The code is as follows:

I'm a/an {{job}}

In addition to ng-init, we have more and better options.

ng-app

Every time you use AngularJS, you cannot do without this command. By the way, $rootScope.
The element that declares ng-app will become the starting point of $rootScope, and $rootScope is the root of the scope chain, usually declared in you know.
In other words, all scopes under the root can access it.
However, it is not recommended to overuse $rootScope, otherwise global variables will be everywhere, which will be inefficient and difficult to manage.
Here is an example:

Copy code The code is as follows:

{{ someProperty }}

<script><br> var myApp = angular.module('myApp', [])<br> .run(function($rootScope) {<br> $rootScope.someProperty = 'hello computer';<br> }); <br> </script>

ng-controller

We use this command to install a controller on a DOM element.
A controller? Indeed, it is good to understand it literally, so why do we need a controller?
Remember that in AngularJS 1.2.x, you can define controller like this...

Copy code The code is as follows:

function ohMyController($scope) {
//...
}

This method is prohibited in AngularJS 1.3.x, because this method will make the controllers fly all over the sky, and it will be impossible to distinguish the levels. Everything is hung on $rootScope...
ng-controller must have an expression as a parameter. In addition, $scope is used to inherit the methods and properties of the superior $scope, including $rootScope.
The following is just a simple example. The ancestor cannot access the scope of the child.

Copy code The code is as follows:

{{ ancestorName }}
{{ childName }}

             {{ ancestorName }}
             {{ childName }}

<script><br> var myApp = angular.module('myApp', [])<br> .controller('ChildController', function($scope) {<br> $scope.childName = 'child';<br> })<br> .controller('AncestorController', function($scope) {<br> $scope.ancestorName = 'ancestor';<br> });<br> </script>

The problem of scope goes beyond 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, but the

tag seemed useful enough.
Taking form verification as an example, there is this piece of code in the previous article:

Copy code The code is as follows:

That is, the submit button is disabled when the form's status is $invalid.
If the scenario is a little more complicated, for example, a parent form has multiple subforms, and the parent form can be submitted when three verifications in the subforms pass.
However, cannot be nested.
Considering this scenario, we use the ng-form directive to solve this problem.
For example:

Copy code The code is as follows:

Name:

ID number:

Guardian name:

Guardian ID number:

submit all

ng-disabled

For attributes like this that are effective as long as they appear, we can make them effective by returning true/false expressions in AngularJS.
Disable form input fields.

Copy code The code is as follows:

1 1=?

ng-readonly

Set the form input field to read-only through the expression return value true/false.
As an example, it will become read-only after 3 seconds.

Copy code The code is as follows:

.run(function($rootScope,$timeout){
$rootScope.stopTheWorld=false;
$timeout(function(){
           $rootScope.stopTheWorld = true;
},3000)
})

ng-checked

This is for , such as...

Copy code The code is as follows:

ng-selected

is used for the in , example:

Copy code The code is as follows:

I'm Full Stack Engineer


Front-End
Back-End
Full Stack !!!

ng-show/ng-hide

Show/hide HTML elements based on expressions. Note that they are hidden, not removed from the DOM, for example:

Copy code The code is as follows:

1 1=2

You can't see me.

ng-change

It’s not onXXX like HTML, but ng-XXX.
Used in conjunction with ng-model, take ng-change as an example:

Copy code The code is as follows:

{{ calc.result }}

or like ng-options

{{}}

In fact, this is also a command. It may feel similar to ng-bind, but it may be seen when the page rendering is slightly slow.
In addition, the performance of {{}} is far inferior to 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 command to avoid FOUC (Flash Of Unrendered Content), which is the flicker caused by unrendering.

ng-cloak

ng-cloak can also solve FOUC for us. ng-cloak will hide 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 hidden, but when inspecting the element you can see that the expression becomes a comment.
If the phase is hidden, you can use ng-hide.

Copy code The code is as follows:

The element cannot be reviewed

Can be censored

ng-switch

Used alone, it is meaningless. Here is an example:

Copy code The code is as follows:

0

1

2

3

ng-repeat

I don’t understand why it’s not called iterate. In short, it traverses the collection and generates template instances for each element. Some special attributes can be used in the scope of each instance, as follows:

Copy code The code is as follows:

$index
$first
$last
$middle
even
odd

No need to explain, it’s easy to see what these are for. Here is an example:

Copy code The code is as follows:

• {{char.alphabet}}

ng-href

At first I made an ng-model in a text field, and then wrote in the href like this.
In fact, there is no difference between href and ng-href, so we can try this:

Copy code The code is as follows:

• {{linkText}}


• It can be clicked, but it may not be the correct address

.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

Much the same, that is, do not load the resource before the expression takes effect.
Example (ps: nice picture! ):

Copy code The code is as follows:

.run(function($rootScope, $timeout) {
$timeout(function() {
          $rootScope.imgSrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}, 2000);
})

ng-class

Dynamically change the class style using objects in the scope, for example:

Copy code The code is as follows:

Get Time!

Number is: {{ x }}

.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 all like it.