AngularJS : créer un champ qui possède la même valeur qu'un autre avec ng-model
Si vous souhaitez créer un champ qui possède la même valeur qu'un autre dans le scope, vous n'êtes pas obligé(e) en fait d'utiliser "NgModel".
Si vous souhaitez créer un champ qui possède la même valeur qu'un autre dans le scope avec AngularJS, vous n'êtes pas obligé(e) en fait d'utiliser "NgModel". "Ng-Model" est utilisé pour lier entre eux des éléments HTML qui existent déjà. Il n'est pas obligatoire dans ce cas. Voici comment faire.
Pour réaliser ce champ, il faut tout d'abord dans le HTML créer le champ et la directive :
<body ng-controller="MonControleur"> La valeur du scope <input ng-model="nom"> <ma-directive variable-directive="nom"></ma-directive> </body>
Dans le code JavaScript, il faut tout d'abord instancier le contrôleur avec le code suivant :
var app = angular.module('plunker', []);
app.controller('MonControleur', function($scope) {
$scope.model = { name: 'World' };
$scope.name = "Felipe";
});
Ensuite, il ne reste qu'à instancier la directive. Dans l'attribut "scope", le signe "=" indique à la directive d'affecter la valeur du champ initial. En affectant à l'attribut "replace" la valeur "true", on indique au contrôleur de remplacer le code HTML de la directive par le code HTML indiqué dans l'attribut "template". L'attribut "link" permet de déclencher la liaison entre les 2 champs (la commande "console" affiche la valeur du scope dans la console JavaScript du navigateur).
app.directive('maDirective', function($compile) {
return {
restrict: 'AE', //La directive est liée à un attribut ou un élément
scope: {
variableDirective: '=', //Lie la valeur de cet attribut au champ
},
template: '<div class="some">' +
'<input ng-model="variableDirective"></div>', //Code HTML qui remplace la directive
replace: true, //Indique que le code HTML de la directive est remplacé
link: function($scope, elem, attr, ctrl) {
console.debug($scope); //Fonction de liaison entre les deux champs
}
};
});
Pour finir, vous pouvez mettre en valeur le code que vous avez créé avec du CSS :
.some {
border: 1px solid #cacaca;
padding: 10px;
}