4

I have a condition in which I have input boxes in listing grid and I have a single directive, now I want to send the value to this directive what ever the input value is..up to this point its working fine, but now when I am trying to change the value from directive input box it is not updating the list grid input box for which the value to the directive set.

Here is a working plnkr, let me know what I am doing wrong.

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

My controller & directive code is like -

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) {

    }
  };
})
Tech Solvr
  • 505
  • 1
  • 7
  • 25

3 Answers3

2

You could set up vm.fordirective to be object reference to item:

Then testdir would need to know somehow what field from item to use as model value. For example, let's use helper attribute:

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

And finally in directive template you need to bind to directivevalue[field]:

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

Demo: http://plnkr.co/edit/jWKwDJvYOutcLihi7UyC?p=preview

dfsq
  • 191,768
  • 25
  • 236
  • 258
  • I think you're missing the point. Or I'm missing the point. Once you begin to edit the input *not* in the loop the binding is broken. Try clicking on an input in the loop, then editing the input in "testdir", then clicking on another input in the loop. – micah Jun 06 '16 at 21:11
  • @dfsq its not working..let suppose you clicked on second input from the list..then it will show the directive with the value of second input....now change the value from directive input and you will see that the 2nd input value in the grid list doesn't change – Tech Solvr Jun 06 '16 at 21:13
  • 1
    @TechSolvr You are right, I misunderstood. Check out correct version with proper demo. – dfsq Jun 06 '16 at 21:22
1

Check this working plnkr -

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

Directive Code -

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;
      };
    }
  };
})

and in Grid list input, add ng-change to track value change to directive -

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

swapnesh
  • 26,318
  • 22
  • 94
  • 126
  • By hardcoding `age` in directive link function, you made it really obtrusive and not flexible. For example you can't use it with different property name without editing directive. – dfsq Jun 06 '16 at 21:27
  • @dfsq yeah I agree it may not be the best code..but in this scenario it won't be too pain to change as even if I pass the age as an attribute to the directive then at later part of change I need to change thr itself – swapnesh Jun 06 '16 at 21:34
0

Instead of using $parent(as it is not a good practice) because angular is handle two way data binding very smoothly itself.

To do this you can bind complete item with the directive scope.

Check working plunkr:

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

Directive code:

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

Naman Bakliwal
  • 26
  • 5