CODEWITHSUNDEEP
htmlangularjs
Brijesh Soni
Brijesh Soni

Reputation: 577

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

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.

Upvotes: 2

Views: 2278

Answers (2)

tanmay
tanmay

Reputation: 7911

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>

Upvotes: 1

georgeawg
georgeawg

Reputation: 48968

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.

Upvotes: 1

Related Questions