Modifier la valeur de la portée du contrôleur à partir d'une directive AngularJS

Question

J'ai une condition dans laquelle j'ai des boîtes de saisie dans la grille de listage et j'ai une seule directive, maintenant je veux envoyer la valeur à cette directive quelle que soit la valeur de la saisie jusqu'à ce point cela fonctionne bien, mais maintenant quand j'essaie de changer la valeur de la boîte de saisie de la directive, cela ne met pas à jour la boîte de saisie de la grille de listage pour laquelle la valeur de la directive est définie.

Voici un plnkr qui fonctionne, dites-moi ce que je fais de travers.

http://plnkr.co/edit/DZdN4itTNccVsuBEJahr?p=preview

Mon controller & directive est comme -

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

myApp.controller('mainCtrl', function(){
  var vm = this;

  vm.fordirective = '';

  vm.list = [
    {id: "1", name: 'Test 1', age: 35},
    {id: "2", name: 'Test 2', age: 36},
    {id: "3", name: 'Test 3', age: 37},
    {id: "4", name: 'Test 4', age: 38},
  ];
})

myApp.directive('testdir', function(){
  return {
    restrict: 'EA',
    scope: {
      directivevalue: "="
    },
    templateUrl: 'dirtemplate.html',
    link: function(scope, elem, attrs) {

    }
  };
})

Answer 1

Vous pouvez mettre en place vm.fordirective pour être une référence d'objet à item :

Dans ce cas testdir aurait besoin de savoir d'une manière ou d'une autre quel champ de item à utiliser comme valeur modèle. Par exemple, utilisons l'attribut helper :

<testdir directivevalue="vm.fordirective" field="age">Loading..</testdir>

Et enfin, dans le modèle de directive, vous devez lier à directivevalue[field] :

<input type="text" ng-model="directivevalue[field]" />

Démonstration : http://plnkr.co/edit/jWKwDJvYOutcLihi7UyC?p=preview

Answer 2

Vérifier ce plan de travail -

http://plnkr.co/edit/DZdN4itTNccVsuBEJahr?p=preview

Code de la directive -

myApp.directive('testdir', function(){
  return {
    restrict: 'EA',
    scope: {
      directivevalue: "=",
      index: "="
    },
    templateUrl: 'dirtemplate.html',
    link: function(scope, elem, attrs) {

      scope.setParentValue = function(directivevalue){
        scope.$parent.vm.list[scope.index].age = directivevalue;
      };
    }
  };
})

et dans l'entrée de la liste de la grille, ajouter ng-change pour suivre la modification de la valeur de la directive - pour suivre la modification de la valeur de la directive - pour suivre la modification de la valeur de la directive

<input ng-model="item.age" ng-click="vm.fordirective = item.age; vm.index = $index" ng-change="vm.fordirective = item.age; vm.index = $index" />

Answer 3

Au lieu d'utiliser $parent (car ce n'est pas une bonne pratique), angular gère lui-même la liaison de données bidirectionnelle de manière très fluide.

Pour ce faire, vous pouvez lier l'élément complet à la portée de la directive.

Vérifier le fonctionnement de la sonde :

https://embed.plnkr.co/LyE0G0APhwC4nco1KvOw/

Code de la directive :

scope.setParentValue = function(directivevalue){ scope.directivevalue = directivevalue; };