How to access $ viewValue from a controller in Angular

Question

I have an angular app installation as follows. Ng-repeat contains li elements with 2 inputs each (more than 2, but I have 2 for this demo).

The directive sets up the controller.

HTML

<li ng-repeat="lw in lw_list" my-lw ng-model="lw" > <input my-cell ng-init="init(lane , $index , 'name')" ng-class="'lib_name inline_div'" type='text' value="{{ lw.library.name }}" > <input my-cell ng-init="init(lane , $index , 'volume') "ng-class="'number_field'" type="number" ng-model='volume' /> </li> 

Javascript

 angular.module('Demo').directive("myCell", function(CellStore){ return { controller : 'CellCtrl' , }; }) ; angular.module('Demo').controller('CellCtrl' , function($scope , CellStore){ $scope.init = function(lane, row, column){ $scope.row = row ; $scope.column = column ; console.log("init" , $scope.$parent ); CellStore.addCell( lane.lane, row, column , $viewValue ) ; } ; }) ; 

So, the idea is that when creating each input, it calls the init function, which will store the input value in a nested hash (for later search). However, I do not know how to access the $ viewValue variable (the value that the inputs contain) from the controller.

Answer 1

As @BoxerBucks reports, reorganize your code into a link function and complete the link. You can also abandon the ng-init approach, since the link function is called when the directive is created.

Firstly, I changed the directive a bit, so the column name is in the value of the my-cell attribute (the lw object and $index are in scope, so there is no need to pass them)

 <li ng-repeat="lw in lw_list" > <input my-cell="name" ng-class="'lib_name inline_div'" type='text' ng-model="lw.name" > <input my-cell="volume" ng-class="'number_field'" ng-model='lw.volume' /> </li> 

The link function then registers this with the CellStore :

 app.directive("myCell", function(CellStore){ return function(scope, elem, attrs) { CellStore.addCell(scope.lw, scope.$index, attrs.myCell); }; }); 

And finally, the addCell method:

 app.service('CellStore', function() { this.addCell = function(lw, row, column) { console.log('add cell:', lw.name, row, column, lw[column]); }; }); 

http://jsfiddle.net/9Lmwj/2/

I was not exactly sure about your data structure, but I hope this is a good start.

Answer 2

Others solved your problem, but I don’t see the answer to your main question, namely, how to access $ viewValue from the controller if you want to.

What you are really doing is accessing an instance of ngModelController that is attached to each input. If you just put the name attribute on your form element and on every input inside it, then their controllers will be available on $scope . (Since you are using ng-repeat, you will need some kind of dynamic naming scheme so that you can reach them all. You can also just rename them.)

Once you have all called to get an instance, simply:

 var instance = $scope.formName.inputName; 

And $ viewValue should be at:

 instance.$viewValue 

Once you get this link, you can also use other methods on ngModelController, for example

 instance.$setValidity(); 

EDIT: You can play around with it and see how it relates to some validation issues on this codeden .

Answer 3

You can put the initialization code in a directive and pass the necessary data:

 <input my-cell ng-class="'lib_name inline_div'" type='text' value="{{ lw.library.name }}" > 

Then the directive will change to something like this:

 angular.module('Demo').directive("myCell", function(){ return { function(scope, element, attrs){} scope.row = row; scope.column = column; scope.CellStore.addCell(scope.lane.lane, row, column, attrs.value); }; }) ; 

Since I cannot see the rest of your application code, you may need to change some variable names to make it work, but the basic premise is simply to use the directive's link function to start your initialization.In addition, you have access to the directive to the inherited area in which your directive is declared.