AngularJs #how to pass scope variable in on change event in directive in input file

Question

I am not able to pass data to controller's function through angular directive, directive has one change event. In which i want to pass my dynamic id. In controller i have myArray

$scope.myArray = [1,2,3,4,5];

I have following html.

<div ng-repeat="data in myArray track by $index">
    <input type="file" ng-upload-change="uploadFile($event, $id)" my-id="$index">
<div>

In Controller:

$scope.uploadFile = function($event, $id){
    var files = $event.target.files;
    console.log("id:"+$id);
};

In directive:

app.directive('ngUploadChange', function() {
    return{
        scope:{
            ngUploadChange:"&",
            myId:"="
        },
        link:function($scope, $element, $attrs){
            $element.on("change",function(event){
                $scope.ngUploadChange({$event: event, $id : $scope.myId});
            })
            $scope.$on("$destroy",function(){
                $element.off();
            });
        }
    }
});

As you can see that when i pass uploadFile function to ngUploadChange directive, it always pass first id (in this case it is 1) to controllers function. I am not getting updated id every time.

Thanks in advance.

I tried your problem in fiddle, and I get the updated Ids always. Try this, check what is missing apart from your problem ? — anoop
– anoop, Commented Apr 1, 2017 at 10:41

tanmay · Accepted Answer · 2017-04-01 11:19:39Z

When you want to pass parameters through the function, you can use "=" instead of "&" for that attr binding, and in your HTML, you can specify like this:

<input type="file" ng-upload-change="uploadFile" ... />

And, I changed the way you were passing an object of params since there is no need to create that object.

Now, if you see the code snippet below, it correctly logs id: x (0-based) on each file upload.

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

//myApp.directive('myDirective', function() {});
myApp.controller('MyCtrl', function MyCtrl($scope) {
  $scope.myArray = [1, 2, 3, 4, 5];
  $scope.uploadFile = function($event, $id) {
    var files = $event.target.files;
    console.log("id: " + $id);
  };
});

myApp.directive('ngUploadChange', function() {
  return {
    scope: {
      ngUploadChange: "=",
      myId: "="
    },
    link: function($scope, $element, $attrs) {
      $element.on("change", function(event) {
        $scope.ngUploadChange(event, $scope.myId);
      })
      $scope.$on("$destroy", function() {
        $element.off();
      });
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat="data in myArray">
    <input type="file" ng-upload-change="uploadFile" my-id="$index">
  </div>
</div>

georgeawg · Accepted Answer · 2017-04-01 11:19:04Z

It is better to write the directive without isolate scope.

app.directive('ngUploadChange', function() {
    return{
        /*
        scope:{
            ngUploadChange:"&",
            myId:"="
        },*/
        link:function($scope, $element, $attrs){
            $element.on("change",function(event){
                var locals = { $event: event,
                               $id : $scope.$eval($attrs.myId)
                }; 
                $scope.$eval($attrs.ngUploadChange, locals);
            });
            /*
            $scope.$on("$destroy",function(){
                $element.off();
            });*/
        }
    }
});

Use $scope.$eval instead of isolate scope bindings.

Isolate scope adds a scope and additional watchers which have been known to cause digest cycle delays that fight the ngModelController.

Collectives™ on Stack Overflow

AngularJs #how to pass scope variable in on change event in directive in input file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related