Angular custom directive calls function on change of input field

Question

I have a directive that places a file upload input field on the DOM, and I then want the ability to call a function when that file is changed. How can I get an on change function to work without placing it in the compiler area? I know it doesn't belong there, as I've been told the compiler is more memory intensive and should only be used for pre-render stuff.

angular.module('myApp').directive('customDirective', ['$http', function ($http) {

  return {
    controller() {

    },
    compile(element) {
      const $fileinput = $('<input type="file" accept=".csv">').appendTo(element);
      return {
        controller: () => {
          $fileinput.on('change', (e) => {
            // Stuff happens
          });
        },
        link: () => {
        },
      };
    },
  };
}]);

Justin Herter · Accepted Answer · 2016-07-01 15:29:25Z

1

Try this instead:

<p>
  Select a file, and you should see an alert message
</p>

<div ng-app="myApp" ng-controller="myCtrl">
    <input type="file" custom-on-change="uploadFile"/>
</div>

var myApp = angular.module('myApp', []);
myApp.directive('customOnChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeFunc = scope.$eval(attrs.customOnChange);
      element.bind('change', onChangeFunc);
    }
  };
});


myApp.controller('myCtrl', function($scope) {
    $scope.uploadFile = function(){
        var filename = event.target.files[0].name;
        alert('file was selected: ' + filename);
    };
});

here is the working fiddle

edited Jul 1, 2016 at 15:29

answered Jul 1, 2016 at 15:24

Justin Herter

6004 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tori Huang Over a year ago

I thought you could only use ng-change with ng-model? ng-model does not work with a file :/ docs.angularjs.org/api/ng/directive/ngChange

Justin Herter Over a year ago

@ToriHuang I edited my original post. This should work for what you need

Alfredo M Over a year ago

I'm getting: TypeError: event is undefined

Collectives™ on Stack Overflow

Angular custom directive calls function on change of input field

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related