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 !!!