JSFiddle - React, Tailwind, and code Playground

by Aaron Zhang

HTML

<div ng-app="MyApp">
    <div ng-controller="MyController">
        <div ng-repeat="i in items">
            <input file change="change($index)">
        </div>
            {{ items }}
    </div>
</div>
</div>

JavaScript

(function () {
    'use strict';
    var app = angular.module('MyApp', []);
    app.controller('MyController', function ($scope) {
        $scope.change = function (index) {
            $scope.items = [1, 2, 3, 4, 5];
            console.log(index);
        };
        
        $scope.items = [1, 2, 3, 4, 5, 6];
    });
    app.directive('file', ['$timeout',function ($timeout) {
        return {
            restrict: 'A',
            replace: true,
            template: '<input type="file">',
            scope: {
                change: '&'
            },
            link: function (scope, element, attrs) {
                function applyFn(){
                    var funcThis = this;
                    var funcArguments = arguments;
                    $timeout(function(){
                      scope.$apply(function (){
                          scope.change.apply(funcThis,funcArguments);
                      });
                    });
                }
                element.bind('change', applyFn);
            }
        };
    }]);
})();