Explication détaillée de l'utilisation de la directive scopel d'Angular-tutoriel HTML-php.cn

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de l'instruction scopel d'angular Quelles sont les précautions d'utilisation de l'instruction scopel d'angular Voici un cas pratique, jetons un coup d'oeil.

Créons une directive personnalisée

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="mainCtrl">
        <my-btn></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.controller(&#39;mainCtrl&#39;,[&#39;$scope&#39;,function($scope){
            $scope.myClass = &#39;primary&#39;;
        }]);
        myApp.directive(&#39;myBtn&#39;,function(){            return {
                template:&#39;<input type="button" value="按钮" class="{{myClass}}">&#39;
            }
        });    </script></body></html>

Copier après la connexion

Explication détaillée de lutilisation de la directive scopel dAngular

C'est vraiment bien d'utiliser une directive personnalisée comme celle ci-dessus, Mais si vous souhaitez personnaliser les boutons rendus par chaque commande, cela ne semble pas possible. Par exemple, ci-dessous, nous créons un tas de commandes personnalisées, et elles se ressemblent exactement :

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="mainCtrl">
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.controller(&#39;mainCtrl&#39;,[&#39;$scope&#39;,function($scope){
            $scope.myClass = &#39;primary&#39;;
        }]);
        myApp.directive(&#39;myBtn&#39;,function(){            return {
                template:&#39;<input type="button" value="按钮" class="{{myClass}}">&#39;
            }
        });    </script></body></html>

Copier après la connexion

<. 🎜> Explication détaillée de lutilisation de la directive scopel dAngular

Une idée est de placer ces boutons de commande personnalisés dans différents contrôleurs, puis de transmettre différentes valeurs dans le contrôleur via le contexte $scope :

  <!DOCTYPE html><html><head>
   <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }        .success{            background: green;
        }        .default{            background: gray;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="aCtrl">
        <my-btn></my-btn>
    </div>
    <div ng-controller="bCtrl">
        <my-btn></my-btn>
    </div>
    <div ng-controller="cCtrl">
        <my-btn></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.controller(&#39;aCtrl&#39;,[&#39;$scope&#39;,function($scope){
            $scope.myClass = &#39;primary&#39;;
        }]);
        myApp.controller(&#39;bCtrl&#39;,[&#39;$scope&#39;,function($scope){
            $scope.myClass = &#39;success&#39;;
        }]);
        myApp.controller(&#39;cCtrl&#39;,[&#39;$scope&#39;,function($scope){
            $scope.myClass = &#39;default&#39;;
        }]);
        myApp.directive(&#39;myBtn&#39;,function(){            return {
                template:&#39;<input type="button" value="按钮" class="{{myClass}}">&#39;
            }
        });    </script></body></html>

Copier après la connexion

Explication détaillée de lutilisation de la directive scopel dAngular

C'est trop compliqué d'écrire comme ça, donc notre angulaire fournit un élément de configuration appelé scope pour nos instructions personnalisées, nous pouvons donc l'écrire comme suit :

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }        .success{            background: green;
        }        .default{            background: gray;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="Controller">
      <my-btn b="className1"></my-btn>
      <my-btn b="className2"></my-btn>
      <my-btn b="className3"></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        
        myApp
        .controller(&#39;Controller&#39;, [&#39;$scope&#39;, function($scope) {
          $scope.className1 = &#39;primary&#39;;
          $scope.className2 = &#39;success&#39;;
          $scope.className3 = &#39;default&#39;;
        }])
        .directive(&#39;myBtn&#39;,function(){            return {
                scope:{
                    a:&#39;=b&#39;
                },
                template:&#39;<input type="button" value="按钮" class="{{a}}">&#39;
            }
        });    </script></body></html>

Copier après la connexion

Pour comprendre ce qui précède, faites simplement attention à deux points :

Le a dans la portée indépendante représente ici le modèle a dans le modèle

=b Cela signifie qu'Angular a besoin pour trouver l'attribut b de l'instruction actuelle dans la vue.

La valeur de l'attribut b doit être trouvée dans la portée externe Si vous souhaitez le lier dans la portée de l'instruction, le nom du modèle est. identique au nom de l'attribut lorsqu'il est utilisé en externe. Il peut être écrit comme suit :

Bien sûr, le signe = ci-dessus est une liaison de données bidirectionnelle :

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }        .success{            background: green;
        }        .default{            background: gray;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="Controller">
      <my-btn a="className1"></my-btn>
      <my-btn a="className2"></my-btn>
      <my-btn a="className3"></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        
        myApp
        .controller(&#39;Controller&#39;, [&#39;$scope&#39;, function($scope) {
          $scope.className1 = &#39;primary&#39;;
          $scope.className2 = &#39;success&#39;;
          $scope.className3 = &#39;default&#39;;
        }])
        .directive(&#39;myBtn&#39;,function(){            return {
                scope:{
                    a:&#39;=&#39;
                },
                template:&#39;<input type="button" value="按钮" class="{{a}}">&#39;
            }
        });    </script></body></html>

Copier après la connexion

Si uniquement Si vous souhaitez une communication de données unidirectionnelle, vous pouvez utiliser le symbole @ :

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }        .success{            background: green;
        }        .default{            background: gray;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="Controller">
      <my-btn a="abc"></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        
        myApp
        .controller(&#39;Controller&#39;, [&#39;$scope&#39;, function($scope) {
          $scope.abc = &#39;我是初始内容&#39;;
        }])
        .directive(&#39;myBtn&#39;,function(){            return {
                scope:{
                    a:&#39;=&#39;
                },
                template:&#39;<input type="text"  ng-model="a"><span>{{a}}</span>&#39;
            }
        });    </script></body></html>

Copier après la connexion

Si vous souhaitez utiliser la classe ng, vous pouvez également l'utiliser :

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }        .success{            background: red;
        }        .default{            background: red;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="Controller">
      <my-btn a="primary"></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        
        myApp
        .controller(&#39;Controller&#39;, [&#39;$scope&#39;, function($scope) {
          $scope.mm = &#39;primary&#39;;
        }])
        .directive(&#39;myBtn&#39;,function(){            return {
                scope:{
                    a:&#39;@&#39;
                },
                template:&#39;<input type="button" value="按钮" class="{{a}}">&#39;
            }
        });    </script></body></html>

Copier après la connexion

Enfin, il existe une portée qui peut être définie : Méthodes de référencement des portées externes

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }        .success{            background: red;
        }        .default{            background: red;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="Controller">
      <my-btn a="primary"></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        
        myApp
        .controller(&#39;Controller&#39;, [&#39;$scope&#39;, function($scope) {
          $scope.mm = true;
        }])
        .directive(&#39;myBtn&#39;,function(){            return {
                scope:{
                    a:&#39;@&#39;
                },
                template:&#39;<input type="button" value="按钮" ng-class="{primary:a}">&#39;
            }
        });    </script></body></html>

Copier après la connexion

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

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }        .success{            background: red;
        }        .default{            background: red;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="Controller">
      <my-btn fn2="fn()"></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        
        myApp
        .controller(&#39;Controller&#39;, [&#39;$scope&#39;, function($scope) {
          $scope.fn = function(){
            alert(11);
          }
        }])
        .directive(&#39;myBtn&#39;,function(){            return {
                scope:{
                    fn1:&#39;&fn2&#39;
                },
                template:&#39;<input type="button" value="按钮" ng-click="fn1()">&#39;
            }
        });    </script></body></html>

Copier après la connexion

Lecture recommandée :

Explication détaillée de l'utilisation du matériau angulaire

Quelles sont les règles de dénomination des sélecteurs d'identifiant dans css

La méthode impopulaire de centrage des éléments horizontalement et verticalement

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!