Le concept d'utilisation d'une portée indépendante dans angulaire-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-03-12 17:04:49

original

1415 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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< Le contenu lié à l'opérateur 🎜>

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

Copier après la connexion

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!