Portée de la directive personnalisée dans AngularJS

1. Portée de la directive personnalisée dans AngularJS
2. Utiliser le Scope: False ou le Shared Scope dans AngularJS
3. Utiliser le Scope: True ou Inherited Scope dans AngularJS
4. Utiliser le Scope : {} ou le champ d’application isolé dans AngularJS
5. Utilisez le @ ou la liaison à sens unique dans AngularJS
6. Utilisez le = ou la liaison bidirectionnelle dans AngularJS
7. Utilisez le & ou la liaison de méthode dans AngularJS

La portée permet à AngularJS de s’assurer qu’un autre objet ne peut pas modifier accidentellement un objet. Pour ce faire, il crée une nouvelle copie de l’objet et le stocke en mémoire.

La portée est également utilisée comme mesure de sécurité, empêchant les utilisateurs non autorisés d’accéder aux objets de la page. Cet article couvrira différentes options et tactiques liées à la portée, telles que l’utilisation d’une portée partagée, l’héritage de la portée parente et la portée isolée.

Portée de la directive personnalisée dans AngularJS

La portée AngularJS est l’un des concepts essentiels dans AngularJS. La portée est utilisée pour déterminer la visibilité de variables et de fonctions spécifiques.

Parlons de direction; si nous voulons une fonction unique dans une application et que nous voulons l’utiliser dans toute la section de l’application, nous devons écrire un jeu de codes. C’est ce qu’on appelle des directives dans Angular.

Un champ d’application est lié à toutes les directives. Cette étendue est utilisée pour accéder aux données et aux méthodes dans le modèle.

Les directives n’établissent pas leur champ d’application par défaut, à moins qu’elles ne soient spécifiquement définies. Par conséquent, les directives traitent la portée de leur parent comme la leur.

En donnant un objet de configuration défini comme objet de définition de directive à AngularJS, nous pouvons modifier la portée par défaut des directives. Plongeons profondément dans le sujet.

Utiliser le Scope: False ou le Shared Scope dans AngularJS

Il génère un champ d’application unique identique à son champ d’application parent, ce qui implique que toute modification du champ d’application du parent sera reflétée dans le champ d’application de la directive et vice versa est également vrai.

JavaScript :

var app = angular.module("Demo",[]);
app.directive("myDirective", function(){
    return {

        scope: false,
        template: "<div>Name : {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

Code HTML:

<div ng-app="Demo">

    <div ng-controller="Hello">
        <h3 ng-click="reverseName()">Hello Dear {{name}}, Click here to change your name</h3>
        <div my-directive class='directive'></div>
    </div>
</div>

Dans cet exemple, lorsque nous modifions le nom de la zone de texte, le nom de l’en-tête change également. La directive utilise sa portée parent car le DDO ne l’inclut pas ici.

Par conséquent, toutes les modifications que nous apportons dans la directive sont également appliquées dans le champ d’application parent. Cliquez ici pour vérifier le fonctionnement du code comme mentionné ci-dessus.

Utiliser le Scope: True ou Inherited Scope dans AngularJS

C’est une portée dérivée au lieu de la portée d’un parent. Les modifications ne seront pas reflétées dans la portée du contrôleur si vous modifiez la portée de la directive.

Toutefois, les modifications apportées au champ d’application parent seront reflétées dans le champ d’application de la directive.

Code JavaScript :

var app = angular.module("Demo",[]);
app.directive("myDirective", function(){
    return {

        scope: true,
        template: "<div>Name : {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

Code HTML:

<div ng-app="Demo">

    <div ng-controller="Hello">
        <h3 ng-click="reverseName()">Hello Dear {{name}}, Click here to change your name</h3>
        <div my-directive class='directive'></div>
    </div>
</div>

Dans cet exemple, la valeur de la portée parent sera affichée à l’écran. Mais que se passe-t-il si nous modifions la valeur dans la zone de texte ?

Ensuite, seule la portée enfant sera modifiée. Il indique que la portée parent est restée inchangée.

Cliquez ici pour vérifier le fonctionnement du code comme mentionné ci-dessus.

Utiliser le Scope : {} ou le champ d’application isolé dans AngularJS

La portée isolée est l’un des aspects les plus significatifs. La directive construira un nouvel objet de portée ici, mais la portée parente n’héritera pas ; par conséquent, il ne connaîtra pas la portée parent.

Cependant, comment pouvons-nous en récupérer les données et comment pouvons-nous les modifier si nous ne nous connectons pas à la portée parent ? La réponse est de mettre l’attribut de l’entité dans DDO ; cependant, vous devez d’abord définir les attributs dans la directive.

Nous utilisons trois préfixes dans une portée isolée pour aider à lier la propriété ou les méthodes du contrôleur aux directives. Voyons comment cela fonctionne.

Lorsqu’une directive découvre des préfixes dans sa propriété scope dans DDO, elle les revérifie dans la déclaration de directive dans la page HTML où la directive est invoquée à l’aide de l’attribut déclaré.

Après l’un des préfixes, nous pouvons donner un nom d’attribut différent pour modifier le nom.

AngularJS a trois types de préfixes.

1. @ - Liaison unidirectionnelle
2. = - Liaison directe du modèle / liaison bidirectionnelle
3. & - Liaison de méthode

Utilisez le @ ou la liaison à sens unique dans AngularJS

La liaison unidirectionnelle signifie qu’un parent envoie quelque chose à la portée de la directive via l’attribut reflété dans la directive. Cependant, toute modification apportée à la directive ne sera pas répercutée dans le parent.

Les valeurs de chaîne sont transmises à l’aide du symbole @.

Code JavaScript :

var app = angular.module("Demo",[]);


app.directive("myDirective", function(){
    return {

 scope: {
            name: '@'
        },
        template: "<div>Name :  {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

Code HTML:

<div ng-app="Demo">

    <div ng-controller="Hello">

        <div my-directive class='directive'></div>

    </div>
</div>
<div ng-app="Demo"></div>

Cliquez ici pour vérifier la démonstration en direct du code ci-dessus.

Utilisez le = ou la liaison bidirectionnelle dans AngularJS

Il est utilisé pour passer un objet à une directive plutôt qu’à une chaîne. Cette entité peut être modifiée à la fois du côté parent et du côté directive.

C’est pourquoi on dit qu’il est bidirectionnel. Pour utiliser la liaison bidirectionnelle, vous devez mettre le signe = à la place de la portée.

scope: {

 name: "="

}

Utilisez le & ou la liaison de méthode dans AngularJS

Il est utilisé pour connecter la méthode de n’importe quel parent à la portée de la directive. Nous pouvons l’utiliser chaque fois que nous appelons les méthodes parentes de la directive.

Il est utilisé pour appeler des fonctions qui ne sont pas actuellement dans la portée. Pour utiliser la liaison de méthode, vous devez mettre le symbole & à la place de la portée.

scope: {
     name: "&"
}

C’est ça; si vous êtes toujours confus, lisez la documentation officielle en cliquant ici.