Directive intégrée AngularJS_AngularJS

directive, je la comprends comme un moyen pour AngularJS de faire fonctionner des éléments HTML.
Puisque la première étape de l'apprentissage d'AngularJS consiste à écrire la directive intégrée ng-app pour indiquer que ce nœud est le nœud racine de l'application, la directive est déjà familière.

Ce blog enregistre brièvement quelques commandes intégrées. Utilisons-les d'abord, puis parlons de quelques choses intéressantes.

Commandes intégrées

Toutes les instructions intégrées sont préfixées par ng. Il n'est pas recommandé pour les instructions personnalisées d'utiliser ce préfixe pour éviter les conflits.
Commencez par quelques commandes intégrées courantes.
Commençons par énumérer quelques instructions intégrées clés et parlons brièvement des problèmes de portée.

ng-modèle

Lier le contrôle de formulaire aux propriétés de la portée actuelle ne semble pas correct.
Mais ne vous inquiétez pas pour le libellé pour l'instant, il est facile à comprendre lorsqu'il est utilisé, par exemple :

Copier le code Le code est le suivant :

{{someModel.someProperty}}

ng-init

Cette directive initialisera la portée interne lorsqu'elle sera appelée.
Cette commande apparaît généralement dans des applications relativement petites, comme donner une démo ou autre...

Copier le code Le code est le suivant :

Je suis un/un {{job}}

En plus de ng-init, nous avons des options plus nombreuses et meilleures.

ng-app

Chaque fois que vous utilisez AngularJS, vous ne pouvez pas vous passer de cette commande. Au fait, $rootScope.
L'élément qui déclare ng-app deviendra le point de départ de $rootScope, et $rootScope est la racine de la chaîne de portée, généralement déclarée en
En d’autres termes, toutes les étendues sous la racine peuvent y accéder.
Cependant, il n'est pas recommandé d'abuser de $rootScope, sinon les variables globales seront partout, ce qui sera inefficace et difficile à gérer.
Voici un exemple :

Copier le code Le code est le suivant :

{{ someProperty }}

<script><br> var monApp = angulaire.module('monApp', [])<br> .run(function($rootScope) {<br> $rootScope.someProperty = 'bonjour ordinateur';<br> }); <br> </script>

ng-contrôleur

Nous utilisons cette commande pour installer un contrôleur sur un élément DOM.
Un contrôleur ? En effet, il est bon de le comprendre littéralement, alors pourquoi avons-nous besoin d'un contrôleur
? N'oubliez pas que dans AngularJS 1.2.x, vous pouvez définir un contrôleur comme celui-ci...

Copier le code Le code est le suivant :

fonction ohMyController ($ scope) {
//...
>

Cette méthode est interdite dans AngularJS 1.3.x, car cette méthode fera voler les contrôleurs partout dans le ciel, et il sera impossible de distinguer les niveaux. Tout est accroché à $rootScope...
ng-controller doit avoir une expression comme paramètre. De plus, $scope est utilisé pour hériter des méthodes et propriétés du $scope supérieur, y compris $rootScope.
Ce qui suit n'est qu'un exemple simple. L'ancêtre ne peut pas accéder à la portée de l'enfant.

Copier le code Le code est le suivant :

{{ancêtreName }}
{{ nomenfant }}

             {{ancêtreName }}
             {{ nomenfant }}

<script><br> var monApp = angulaire.module('monApp', [])<br> .controller('ChildController', function($scope) {<br> $scope.childName = 'enfant';<br> })<br> .controller('AncestorController', function($scope) {<br> $scope.ancestorName = 'ancêtre';<br> });<br> </script>

Le problème de la portée va au-delà de cela. Laissons-le de côté pour l'instant et continuons à examiner d'autres instructions intégrées.

ng-form

Au début, je ne comprenais pas pourquoi il y avait une commande form, mais la balise

En prenant comme exemple la vérification de formulaire, il y a ce morceau de code dans l'article précédent :

Copier le code Le code est le suivant :

C'est-à-dire que le bouton de soumission est désactivé lorsque le statut du formulaire est $invalid.
Si le scénario est un peu plus compliqué, par exemple, un formulaire parent comporte plusieurs sous-formulaires et le formulaire parent peut être soumis lorsque trois vérifications dans les sous-formulaires réussissent.
Toutefois, ne peut pas être imbriqué.
Considérant ce scénario, nous utilisons la directive ng-form pour résoudre ce problème.
Par exemple :

Copier le code Le code est le suivant :

Nom :

Numéro d'identification :

Nom du tuteur :

Numéro d'identification du tuteur :

soumettre tout

ng-handicapé

Pour des attributs comme celui-ci qui sont efficaces tant qu'ils apparaissent, nous pouvons les rendre efficaces en renvoyant des expressions vrai/faux dans AngularJS.
Désactivez les champs de saisie du formulaire.

Copier le code Le code est le suivant :

1 1=?

ng-readonly

Définissez le champ de saisie du formulaire en lecture seule via la valeur de retour de l'expression vrai/faux.
A titre d'exemple, il deviendra en lecture seule après 3 secondes.

Copier le code Le code est le suivant :

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

ng-vérifié

Ceci est pour , tel que...

Copier le code Le code est le suivant :

ng-sélectionné

est utilisé pour l' dans , exemple :

Copier le code Le code est le suivant :

<étiquette>

Je suis ingénieur Full Stack


Front-End
Back-End
Full Stack !!!