recherche

Maison >interface Web >js tutoriel >Le concept d'utilisation d'une portée indépendante dans angulaire

Le concept d'utilisation d'une portée indépendante dans angulaire

php中世界最好的语言
php中世界最好的语言original
2018-03-12 17:04:491390parcourir

Cette fois, je vais vous présenter le concept d'utilisation d'une lunette indépendante angulaire. Quelles sont les précautions lors de l'utilisation d'une lunette indépendante angulaire. Voici des cas pratiques, jetons un coup d'oeil. 

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <ceshi></ceshi>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;ceshi&#39;,function(){            var option = {
                template:&#39;<p>{{abc}}</p>&#39;
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
            $scope.abc = &#39;ericzheng&#39;;
        });    </script></body></html>

Lorsque nous créons nous-mêmes une commande, cette commande ne peut pas être utilisée une seule fois. Elle doit être utilisée à plusieurs reprises. Certaines d'entre elles se trouvent dans une page ou un contrôleur Doivent être utilisées. plusieurs fois.
Semblable au scénario ci-dessus, la modification des données dans n'importe quelle zone de saisie entraînera la modification des données dans d'autres balises en même temps. Ce n'est évidemment pas ce que nous voulons pour le moment, une portée indépendante est nécessaire.

Pour convertir en portée indépendante, vous n'avez besoin que d'une seule ligne de code : 

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <ceshi></ceshi>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;ceshi&#39;,function(){            var option = {
                template:&#39;<p>{{abc}}</p>&#39;,
                scope:{}
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
            $scope.abc = &#39;ericzheng&#39;;
        });    </script></body></html>

Liaison de données unidirectionnelle  :

@ opérateur , le contenu entre guillemets doubles est traité comme string pour la liaison 

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <my-directive name="aaaa"></my-directive>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;myDirective&#39;,function(){            var option = {
                template:&#39;<p>wew{{name}}<p/>&#39;,
                scope:{
                    name:&#39;@&#39;
                }
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
        });    </script></body></html>

Liaison unidirectionnelle, obtient la valeur de l'attribut de la commande actuelle. , puis l'attribue à l'attribut Cet attribut actuel dans la portée indépendante

Le concept dutilisation dune portée indépendante dans angulaire

Liaison de données bidirectionnelle

= l'opérateur lie une variable 

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <input type="text" ng-model="abc">
    <my-directive name="abc"></my-directive>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;myDirective&#39;,function(){            var option = {
                template:&#39;<p>wew{{name}}<input ng-model="name"><p/>&#39;,
                scope:{
                    name:&#39;=&#39;
                }
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
            $scope.abc = &#39;ericzheng&#39;;
        });    </script></body></html>

name ="abc" est le noyau. Le côté gauche est connecté à la portée indépendante et le côté droit est connecté au modèle dans la portée externe abc

Le concept dutilisation dune portée indépendante dans angulaire

Utiliser le comportement du scope parent

& est une méthode 

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <my-directive fn1="fn2(name)"></my-directive>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;myDirective&#39;,function(){            var option = {                restrict:&#39;E&#39;,                template:&#39;<button ng-click="fn1({name:\&#39;username\&#39;})">wfewef</button>&#39;,                scope:{                    fn1:&#39;&&#39;
                }
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
            $scope.fn2 = function(attr){                console.log(attr);
            }
        });    </script></body></html>

Le concept dutilisation dune portée indépendante dans angulaire

Comment comprendre :

Quelle que soit la manière dont l'instruction est implémentée en interne, examinons d'abord comment l'utiliser, puis comment les variables ou méthodes dans la portée parent correspondante sont définies.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation de la directive scopel d'angular

Explication détaillée de l'utilisation de Angular Material

Explication détaillée de l'utilisation de $apply() dans angulairejs

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：Explication détaillée de l'utilisation de $apply() dans angulairejsArticle suivant：Explication détaillée de l'utilisation de $apply() dans angulairejs

Articles Liés

Voir plus