1

I have a directive with a form (for the example here it's a simple input), that I use several in the same page (index.html) Outside of this directive I have a button and when I click on it I want to get the data inside all the directives' input.

At first I tried using the solution from this question How to call a method defined in an AngularJS directive? but I have trouble using it with several directives at once. I also tried to use the children list with $$childHead but I understand from other posts that it is not right to do so. Anyway I'm not sure why but this last solution stopped working (it couldn't call the directive function anymore).

What would be the best approach to do this?

Here's my simplified code:

index.html:

    <div ng-repeat="item in data">
        <h1> {{item.name}} </h1>
        <my-dir info=item >/my-dir>
    </div>
    <input type="submit" value="Save" ng-click="save()" />

Directive:

    app.directive('myDir', function() {
      return {
        restrict: 'E',
        scope: {
            info: '='
        },
        templateUrl: '<input type="text" ng-model="myfield" />',
        link: function(scope, element, attrs) {
                scope.getData = function(){
                    var field_data = scope.myfield;
                    return field_data // not sure if needed
                }
        }
      };
    });

Controller:

    $scope.save= function(){
        // Call the getData function of the directive or get 
        // the data needed somehow and do something with it
    }
Community
  • 1
  • 1
stop-start
  • 317
  • 3
  • 13
  • From what `myDir` do you want to get data on `save`? Each of them or only one? – dfsq Sep 20 '15 at 13:31
  • I want to get everyone but not separately. I mean I want to be able for example to compare them, etc. – stop-start Sep 20 '15 at 13:34
  • So do you only want the value of the inner input fields bound to `myfield` ngModel? – dfsq Sep 20 '15 at 13:35
  • Yes, although my original directive is composed of several inputs, but I don't think it should matter. – stop-start Sep 20 '15 at 13:37
  • it matters what data you want to be able to pass outside. If it's simple ngModel then it's easy with just scope configuration via two-way binding. If you want somehow to expose multiple values then it's different story. – dfsq Sep 20 '15 at 13:39
  • For now I have around 6 ng-model to pass, but it might change and might not be only ng-model... – stop-start Sep 20 '15 at 13:42

1 Answers1

2

The best way to achieve the same result would be to pass data as a two-way binding parameter to the directive, like you usually do with ng-model on the standard directives that come with angular.

... scope: { info: '=', data: '=' }, ...

and then 

<my-dir info="item" data="data[0]" ></my-dir>
<my-dir info="item" data="data[1]" ></my-dir>
Jakub Judas
  • 737
  • 6
  • 16
  • This is the simplest and the most natural way to do it. Other way is reusable service. – dfsq Sep 20 '15 at 13:46
  • And data[0], data[1]... would contain the value in myField? – stop-start Sep 20 '15 at 13:48
  • Exactly. data[0] and data[1] could be objects that contain all the fields you need. If any of them need special processing before you want to pass them to the outside, you can set up a $watch to save the processed value into data when myFiled changes. – Jakub Judas Sep 20 '15 at 13:50
  • I think I'm doing something wrong. I added --> data="data[$index]". Then in my save function in the controller I tried to access $scope.data but it's undefined. In the directive I wrote scope.data = scope.myfield (for now let's try with one field) – stop-start Sep 20 '15 at 14:12
  • Did you define the variable data in the parent controller scope? I also noticed that I unwisely named a variable in my answer data even though you were already using the name for the data source of the ng-repeat, so it could also be that. – Jakub Judas Sep 20 '15 at 16:17