Récupérer la valeur d’un champ dans une directive Angular.js et vice versa

Angular.js - Tips
Standard

Certains d’entre vous ont peut être déjà essayé de récupérer la valeur d’un champ dans une directive d’Angular.js et n’y sont peut être pas arrivé? Il est vrai que ce n’est pas forcement facile aux premiers abords!

Création de la page HTML avec notre script Angular.js

Rien de très sorcier ici, nous créons notre page HTML classique et nous y ajoutons deux controleurs, deux directives et un template Angular.js afin que vous ayez en visuel toute les possibilités de faire ce genre de chose.

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Angular.js - Récupérer la valeur d'un champ dans une directive Angular.js et vice versa</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
        <script src="script.js"></script>
    </head>

    <body>
    <div ng-app="MyApp">

        <div ng-controller="MyCtrl">
            {{foo}}
            <my-directive ng-model="foo" />
        </div>
        <hr>

        <script type="text/ng-template" id="my-customer.html">
            {{fall}}
        </script>

        <div ng-controller="MyCtrl2">
            <input type="text" ng-model="fall" />
            <br>
            <my-sec-directive ng-model="fall" />
        </div>
    </div>
    </body>
</html>

Voici également le code source Javascript pour ceux qui n’auraient pas le temps d’aller jusqu’à la fin du tutoriel :

script.js
var myApp = angular.module('MyApp', []);

myApp.controller('MyCtrl', function($scope) {
    $scope.foo = "I'm foo!";
});

myApp.directive('myDirective', function() {
    return {
        restrict: 'E',
        template: '<div><input type="text" ng-model="ngModel" /></div>',
        scope: {
            ngModel: '=',
        },
    };
});

myApp.controller('MyCtrl2', function($scope) {
    $scope.fall = "I'm foo!";
});

myApp.directive('mySecDirective', function() {
    return {
        restrict: 'E',
        templateUrl: 'my-customer.html',
        scope: {
            fall: "=ngModel"
        },
    };
});

Première directive : Le champ texte se trouve dans la directive

Nous allons commencer par détailler la première partie, c’est à dire le premier controller (oui j’utilise le terme anglais, c’est plus simple/propre) et la première directive :

index.html
<div ng-controller="MyCtrl">
    {{foo}}
    <my-directive ng-model="foo" />
</div>

Et la partie Javascript :

script.js
myApp.controller('MyCtrl', function($scope) {
    $scope.foo = "I'm foo!";
});

myApp.directive('myDirective', function() {
    return {
        restrict: 'E',
        template: '<div><input type="text" ng-model="ngModel" /></div>',
        scope: {
            ngModel: '=',
        },
    };
});

Comme vous pouvez le voir ci-dessus nous déclarons la variable “foo” puis on l’a lie au modèle dans la partie HTML mais également lors de la déclaration de notre directive (qui contient le champ texte).

A partir de maintenant, quand vous aller modifier votre champ texte, la valeur de “foo” sera également modifier.

N’hésitez pas à jeter un oeil à la démonstration

Deuxième directive : Le champ texte se trouve dans la page HTML

Maintenant nous allons faire l’inverse, nous allons mettre le champ sur notre page HTML, avant la directive et le champ qui devra être modifié se trouvera dans la directive.

Voici donc notre code HTML :

index.html
<script type="text/ng-template" id="my-customer.html">
    {{fall}}
</script>

<div ng-controller="MyCtrl2">
    <input type="text" ng-model="fall" />
    <br>
    <my-sec-directive ng-model="fall" />
</div>

Comme vous pouvez le voir ci-dessous, nous commençons par déclarer notre template Angular.js qui se nomme tout simplement “my-customer.html”. Celui-ci va nous permettre d’afficher notre variable.

Vient alors la déclaration de notre deuxième controller avec notre champ texte et notre directive. Vous pouvez remarquer qu’encore une fois, nous utilisons un modèle avec le même nom afin qu’il soit lié.

Voici maintenant le code Javascript permettre de lié tout ça :

script.js
myApp.controller('MyCtrl2', function($scope) {
    $scope.fall = "I'm foo!";
});

myApp.directive('mySecDirective', function() {
    return {
        restrict: 'E',
        templateUrl: 'my-customer.html',
        scope: {
            fall: "=ngModel"
        },
    };
});

On instancie toujours la variable, on lie le modèle dans notre directive et le tour est joué!

Quelques liens

Démonstration de l’exemple ci-dessus