Tech Solvr Tech Solvr - 6 months ago 16
AngularJS Question

Change controller scope value from directive AngularJS

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

}
};
})

Answer

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