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

ng-show/ng-hide

Afficher/masquer les éléments HTML basés sur des expressions. Notez qu'ils sont masqués et non supprimés du DOM, par exemple :

Copier le code Le code est le suivant :

1 1=2

Vous ne pouvez pas me voir.

ng-change

Ce n'est pas onXXX comme HTML, mais ng-XXX.
Utilisé conjointement avec ng-model, prenez ng-change comme exemple :

Copier le code Le code est le suivant :

{{ calc.result }}

ou comme ng-options

{{}}

En fait, c'est aussi une commande. Cela peut ressembler à ng-bind, mais cela peut être vu lorsque le rendu de la page est légèrement lent.
De plus, les performances de {{}} sont bien inférieures à celles de ng-bind, mais il est très pratique à utiliser.

ng-bind

Le comportement de ng-bind est similaire à {{}}, sauf que nous pouvons utiliser cette commande pour éviter le FOUC (Flash Of Unrendered Content), qui est le scintillement provoqué par l'annulation du rendu.

ng-manteau

ng-cloak peut également résoudre FOUC pour nous. ng-cloak masquera les éléments internes jusqu'à ce que la route appelle la page correspondante.

ng-if

Si l'expression dans ng-if est fausse, l'élément correspondant sera supprimé du DOM au lieu d'être masqué, mais en inspectant l'élément, vous pouvez voir que l'expression devient un commentaire.
Si la phase est masquée, vous pouvez utiliser ng-hide.

Copier le code Le code est le suivant :

L'élément ne peut pas être révisé

Peut être censuré

ng-switch

Utilisé seul, cela n'a aucun sens. Voici un exemple :

Copier le code Le code est le suivant :

0

1

2

3

ng-répétition

Je ne comprends pas pourquoi cela ne s'appelle pas itérer. En bref, il parcourt la collection et génère des instances de modèle pour chaque élément. Certains attributs spéciaux peuvent être utilisés dans la portée de chaque instance, comme suit :

Copier le code Le code est le suivant :

$index
$premier
$dernier
$milieu
même
bizarre

Pas besoin d’expliquer, il est facile de voir à quoi ça sert. Voici un exemple :

Copier le code Le code est le suivant :

• {{char.alphabet}}

ng-href

Au début, j'ai créé un modèle ng dans un champ de texte, puis j'ai écrit dans le href comme ceci.
En fait, il n'y a aucune différence entre href et ng-href, donc on peut essayer ceci :

Copier le code Le code est le suivant :

• {{linkText}}

.run(function($rootScope, $timeout) {
$rootScope.linkText = 'Pas encore chargé, vous ne pouvez pas cliquer';
$timeout(function() {
          $rootScope.linkText = 'Veuillez cliquer'
          $rootScope.myHref = 'http://google.com';
}, 2000);
})

ng-src

C'est pareil, c'est-à-dire ne chargez pas la ressource avant que l'expression ne prenne effet.
Exemple (ps : jolie photo !) :

Copier le code Le code est le suivant :

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

ng-class

Modifiez dynamiquement le style de classe à l'aide d'objets dans la portée, par exemple :

Copier le code Le code est le suivant :

Obtenir l'heure !

Le numéro est : {{ x }}

.controller('CurTimeController', function($scope) {
$scope.getCurrentSecond = fonction() {
          $scope.x = new Date().getSeconds();
};
})

Ce qui précède est tout le contenu décrit dans cet article, j'espère que vous l'aimerez tous.