Directive, je comprends comme un moyen pour AngularJS de manipuler les éléments HTML.
Étant donné que la première étape de l'apprentissage d'AngularJS consiste à écrire l'instruction intégrée NG-App pour indiquer que le nœud est le nœud racine de l'application, les instructions sont déjà familières.
Ce journal enregistre simplement certaines instructions intégrées, utilisez-les d'abord, puis parlez de choses intéressantes.
Commandes intégrées
Toutes les directives intégrées n'ont pas de préfixes, et il n'est pas recommandé d'utiliser ce préfixe pour les directives personnalisées afin d'éviter les conflits.
Commencez par quelques instructions intégrées courantes.
Tout d'abord, répertoriez certaines instructions clés intégrées et parlez brièvement des problèmes de portée.
ng model
Cette explication ne semble pas être correcte lors de la liaison du contrôle de forme aux propriétés de la portée actuelle.
Mais ne vous inquiétez pas d'être moelleux, il est facile de comprendre lors de l'utilisation, par exemple:
La copie de code est la suivante:
<input type = "text" ng-model = "SomeModel.someproperty" /> <br>
{{SomeModel.Someproperty}}
ng-init
Cette directive est appelée portée interne initialisée.
Cette instruction apparaît généralement dans des applications plus petites, comme donner une démo ou quelque chose ...
La copie de code est la suivante:
<div ng-init = "job = 'Fighter'">
Je suis a / an {{travail}}
</div>
Outre NG-INT, nous avons plus d'options et mieux.
ng-app
Chaque fois que vous utilisez AngularJS, cette commande en est inséparable. Soit dit en passant, $ Rootscope est inclus.
Déclare que l'élément NG-APP devient le point de départ de $ Rootscope, qui est la racine de la chaîne de portée, qui est généralement déclaré dans <html> que vous comprenez.
C'est-à-dire qu'il est accessible par la portée sous la racine.
Cependant, il n'est pas recommandé de surutiliser $ Rootscope pour éviter que les variables mondiales volent dans le ciel, ce qui rend l'efficacité pauvre et difficile à gérer.
Voici un exemple:
La copie de code est la suivante:
<html ng-app = "myApp">
<body>
{{Someproperty}}
</docy>
<cript>
var myapp = angular.module ('myapp', [])
.run (fonction ($ rootscope) {
$ rootscope.someproperty = 'Hello Computer';
});
</cript>
</html>
contrôleur NG
Nous utilisons cette instruction pour installer le contrôleur sur un élément DOM.
Un contrôleur? En effet, il est bon de comprendre cela littéralement, alors pourquoi avons-nous besoin d'un contrôleur?
N'oubliez pas que lorsque AngularJS 1.2.x, vous pouvez également définir des contrôleurs comme celui-ci ...
La copie de code est la suivante:
fonction ohmyController ($ scope) {
// ...
}
Cette méthode est interdite dans AngularJS 1.3.x car cette méthode fera voler dans le ciel, et vous ne pouvez pas faire la différence entre les niveaux et tout est accroché à $ Rootscope ...
Le contrôleur NG doit avoir une expression en tant que paramètre, et en outre, les méthodes et les propriétés de la portée $ précédente sont héritées de $ Scope, et $ Rootscope est également inclus.
Ce qui suit n'est qu'un exemple simple, l'ancêtre ne peut pas accéder à la portée de l'enfant.
La copie de code est la suivante:
<div ng-contrôleur = "AncestorController">
{{anystorname}}
{{childname}}
<div ng-contrôleur = "childController">
{{anystorname}}
{{childname}}
</div>
</div>
<cript>
var myapp = angular.module ('myapp', [])
.Controller ('ChildController', fonction ($ scope) {
$ scope.childName = 'Child';
})
.Controller («AncestorController», fonction ($ Scope) {
$ scope.ancestorname = 'ancêtre';
});
</cript>
Le problème de la portée est bien plus que cela. Mettons-le de côté pour le moment et continuons à examiner d'autres instructions intégrées.
forme ng
Au début, je ne comprenais pas pourquoi il y avait une commande de formulaire, et la balise <form> se sentait suffisamment.
Prenant l'exemple de vérification du formulaire, il y a un morceau de code dans l'article précédent:
La copie de code est la suivante:
<input type = "soumi" ng-disabled = "mainform. $ invalid" />
Autrement dit, lorsque l'état du formulaire est $ invalide, le bouton Soumettre est désactivé.
Si la scène est un peu plus compliquée, par exemple, il existe plusieurs formulaires enfants sous forme parentale, et le formulaire parent peut être soumis lorsque 3 du formulaire d'enfant transmet la vérification.
Cependant, <form> ne peut pas être imbriqué.
Compte tenu de ce scénario, nous utilisons la directive Ng-Form pour résoudre ce problème.
Par exemple:
La copie de code est la suivante:
<form name = "mainform" novalidate>
<div ng-forme = "form1">
Nom: <input type = "text" ng-required = "true" ng-model = "name" /> <br>
Numéro d'ID: <Type de saisie = "Numéro" Ng-MinLength = "15" Ng-MaxLength = "18" Ng-Required = "True" ng-model = "idnum" />
</div>
<br>
<div ng-form = "form2">
Nom du gardien: <input type = "text" ng-required = "true" ng-model = "gname" /> <br>
Numéro d'ID Guardian: <input type = "Number" ng-MinLength = "15" ng-maxLength = "18" ng-required = "true" ng-model = "gidnum" />
</div>
<Button ng-disabled = "Form1. $ invalid && form2. $ invalid"> soumettre tout </ftones>
</ form>
ng déloyant
Pour des attributs comme celui-ci qui prennent effet tant qu'ils apparaissent, nous pouvons le rendre efficace dans AngularJS en renvoyant la valeur True / Faux par la valeur de retour d'expression.
Désactiver les champs d'entrée de formulaire.
La copie de code est la suivante:
<TextArea ng-Disabled = "1 + 1 == 2"> 1 + 1 =? </ TextArea>
ng-lecturely
Définissez le champ de saisie de formulaire sur Readully en renvoyant la valeur true / false par l'expression.
Faites un exemple, et il devient en lecture seule après 3 secondes.
La copie de code est la suivante:
<input type = "text" ng-readonly = "stopTheworld" value = "stop the world after 3s" />
.run (fonction ($ rootscope, $ timeout) {
$ rootscope.stoptheworld = false;
$ timeout (function () {
$ rootscope.stoptheworld = true;
}, 3000)
})
ng vérifié
Ceci est pour <entrée type = "Checkbox" />, comme ...
La copie de code est la suivante:
<input type = "checkbox" ng-checked = "someproperty" ng-init = "someproperty = true" ng-model = "someproperty">
Ng sélectionné
Pour une utilisation avec <option> dans <lelect>, exemple:
La copie de code est la suivante:
<étiquet>
<input type = "checkbox" ng-model = "iSullStack">
Je suis ingénieur complet
</ label>
<élect>
<opopoption> frontal </opoption>
<opoption> back-end </opoption>
<option ng-selected = "iSullStack"> pile complète !!! </ option>
</lect>
ng-show / ng-hide
Afficher / masquer les éléments HTML Selon l'expression, notez qu'il est caché, non supprimé du DOM, par exemple:
La copie de code est la suivante:
<div ng-show = "1 + 1 == 2">
1 + 1 = 2
</div>
<div ng-hide = "1 + 1 == 3">
Tu ne peux pas me voir.
</div>
changement de norme
Ce n'est pas ONXXX de HTML ou quelque chose, mais NG-XXX.
Utiliser en combinaison avec le modèle NG, en prenant un changement NG comme exemple:
La copie de code est la suivante:
<input type = "text" ng-model = "calcc.arg" ng-change = "calcc.Result = calcc.arg * 2" />
<code> {{calcc.result}} </code>
Ou, par exemple, ng-options
{{}}
En fait, c'est aussi une directive. Peut-être que cela ressemble à Ng-Bind, mais cela peut être vu lorsque la page rend légèrement plus lent.
De plus, les performances de {{}} sont bien inférieures à Ng-bider, mais elle est très pratique à utiliser.
ng-bider
Le comportement de Ng-Bind est similaire à {{}}, sauf que nous pouvons utiliser cette instruction pour éviter le FOUC (flash de contenu non-Sendered), c'est-à-dire un scintillement causé par le déroulement.
ng-coak
Ng-Coak peut également résoudre le FOUC pour nous. Ng-Cloak cache les éléments internes jusqu'à ce que l'itinéraire 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 caché, mais lors de l'examen de l'élément, vous pouvez voir que l'expression devient un commentaire.
Si la phase est masquée, vous pouvez utiliser NG-Hide.
La copie de code est la suivante:
<div ng-if = "1 + 1 === 3">
Cet élément ne peut pas être examiné
</div>
<div ng-hide = "1 + 1 == 2">
Peut être examiné
</div>
interrupteur ng
Peu importe que vous l'utilisiez seul, voici des exemples:
La copie de code est la suivante:
<div ng-switch sur = "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-répétition
Je ne comprends pas qu'il ne s'appelle pas. En bref, il s'agit de traverser la collection et de générer 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:
La copie de code est la suivante:
$ index
$ d'abord
$ dernier
$ Middle
Même
impair
Sans avoir à l'expliquer spécifiquement, il est facile de voir à quoi ce sont. Voici un exemple:
La copie de code est la suivante:
<ul>
<li ng-repeat = "char dans
[{'alphabet': 'k'},
{'alphabet': 'a'},
{'Alphabet': 'V'},
{'Alphabet': 'l'},
{'alphabet': 'e'},
{'alphabet': 'z'}] "ng-show =" $ même "> {{char.alphabet}} </li>
</ul>
ng-href
Au début, j'ai fait un modèle Ng dans un champ de texte, puis je l'ai écrit dans HREF comme celui-ci.
En fait, il n'y a pas de différence entre HREF et NG-HREF, nous pouvons donc essayer ceci:
La copie de code est la suivante:
<ul ng-init = "myhref = ''">
<li> <a ng-href = "{{myhref}}"> {{linkText}} </a> </li>
<li> <a href = "{{myhref}}"> Cliquez, mais pas nécessairement l'adresse correcte </a> </li>
</ul>
.run (fonction ($ 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
Il en va de même, c'est-à-dire que la ressource ne doit pas être chargée avant que l'expression ne prenne effet.
Exemple (PS: l'image est bonne!):
La copie de code est la suivante:
<img ng-src = "{{imgsrc}}" />
.run (fonction ($ rootscope, $ timeout) {
$ timeout (function () {
$ rootscope.imgsrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}, 2000);
})
classe ng
Changez dynamiquement les styles de classe avec des objets dans la portée, par exemple:
La copie de code est la suivante:
<style>
.red {fond de fond: rouge;}
.Blue {fond de fond: bleu;}
</ style>
<div ng-contrôleur = "CurtiMecontroller">
<Button ng-Click = "GetCurrentSecond ()"> Obtenez le temps! </fut Button>
<p ng-class = "{red: x% 2 == 0, bleu: x% 2! = 0}"> Le nombre est: {{x}} </p>
</div>
.Controller ('CurtiMecontroller', fonction ($ scope) {
$ scope.getCurrentSecond = function () {
$ 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'aimez.