Maison > Article > interface Web > Contrôleur d'apprentissage AngularJs, liaison de données, explication détaillée de la portée

Contrôleur d'apprentissage AngularJs, liaison de données, explication détaillée de la portée

零下一度original: 2017-07-23 18:05:211384parcourir

1. Contrôleur :

Concept : Dans angulaireJS, le contrôleur est une fonction qui est utilisée pour ajouter des fonctions supplémentaires à la portée de la vue et pour définir le rôle. . L'état initial du domaine et ajouter un comportement personnalisé.

Déclaration du contrôleur : app.controller('controllerName',function($scope){...})

//    控制器定义//    第一参数： 控制器名称， 第二个参数： 匿名函数， 传入作用域,并在作用域上添加额外功能app.controller('myCtrl', function($scope) {
        $scope.expression = "hello expression";
        $scope.ngbind = "hello ng-bind";
        $scope.htmlbind = "d12c29ee83e5b622484f1e9842eecbbdhello,htmlbinde6e38b3c62e8df885fe2e3986461aa63";
        $scope.subCtrl = "hello subCtrl";

    });

Utilisation du contrôleur : Ajoutez ng-controller si nécessaire (sur une certaine balise HTML).

<body ng-app="myapp" ng-controller="myCtrl">

D'après ce qui précède, la définition et l'utilisation du contrôle sont relativement simples, mais beaucoup de gens ne comprendront pas la fonction et l'utilisation du contrôleur. Je ne sais pas quel code doit être écrit dans le contrôleur. Certaines personnes pousseront l'intégralité du code dans le contrôleur. Je pense personnellement que le contrôleur n'est qu'un lien entre la vue de la page et le mode. ne gère que certaines liaisons de données et événements. Une série de logiques simples telles que la liaison, l'accès au serveur spécifique ou la lecture de données, etc. devraient être implémentées dans le service. Je vous parlerai en détail du service la prochaine fois.

J'ai simplement trié les éléments auxquels il faut faire attention lors de l'utilisation du contrôle pour votre référence :

1) Simplifiez autant que possible les opérations liées au contrôleur et au $scope.
2) Ne réutilisez pas Controller. Un contrôleur n’est généralement responsable que d’une petite partie de la vue.
3) Ne manipulez pas le DOM dans le Controller, cela n'est pas de la responsabilité du contrôleur.
4) Essayez de ne pas effectuer de filtrage de données ou d'opérations de données dans le contrôleur.
5) De manière générale, les contrôleurs ne s'appelleront pas. L'interaction entre les contrôleurs se fera via des événements

2. Portée ($scope)

Scope est également mentionné dans le contrôleur ci-dessus. Le contrôleur effectue principalement des opérations liées à $scope. Permettez-moi de parler brièvement du rôle de scope dans AngularJs et de son cycle de vie. Le résumé du partage interne est publié pour tout le monde. à partager :

3. Liaison de données :

La liaison de données AngularJs a également plusieurs liaisons, je vais les lister pour vous. Peut-être que tout le monde les a utilisées, et certains amis n'en ont peut-être pas utilisé certaines.

{{}}: 🎜> Fonction : {{ func()}} 🎜> Expression : {{a+b}}

' s ' s ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ Expression : {{a+b}}

Cette méthode est la liaison d'expression la plus courante, tant que les rencontres angulaires l'expression dans le cadre d'Angular L'expression est automatiquement analysée en une expression ou une variable reconnue par HTML.

2) Méthode de directive (ng-bind) :

Cette méthode de liaison consiste à ajouter la directive ng-bind sur l'élément, puis Angular analyse la directive et exécute la liaison.

3) ng-model :

Cette méthode est principalement utilisée dans la soumission de formulaires pour obtenir une liaison de données bidirectionnelle et des données bidirectionnelles entre le contenu de la page et le modèle.

4) ng-bind-html :

Cette méthode est principalement utilisée pour lier des éléments HTML, car Angularjs n'analyse pas les balises HTML par défaut et les affiche directement, je souhaite donc les ajouter à la page. Vous pouvez utiliser cette méthode de liaison pour afficher le contenu des balises HTML, mais cette liaison doit faire référence à un fichier js sérialisé.

 bea4b67a9fe0f78efa78bb17563afef42cacc6d41bbb37262a98f745aa00fbf0

5) ng-bind-template :

Cette méthode peut lier plusieurs variables et expressions à la fois.

Scénarios d'utilisation :

La page d'accueil utilise ng-bind, les pages du modèle peuvent utiliser des crochets {{}} et le formulaire utilise ng-model,

Défauts de la syntaxe {{}} : Il est possible de voir {} lorsque l'utilisateur rafraîchit constamment ; et lorsque le réseau n'est pas bon, il est également possible de voir Le code suivant Le code global pour les cinq méthodes ci-dessus :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jquery étendre et fn.extendArticle suivant：jquery étendre et fn.extend

Articles Liés

Voir plus