How to pass data from directive to controller with angularjs? [duplicate]

Question

I want to show progress of the file upload (file reader).

Here is my html:

<md-progress-linear id="file-progress-indicator" md-mode="determinate" value="{{progress}}"></md-progress-linear>

and here is my directive:

angular.module('image.directives').directive('edFileUploader', ['$parse', '$mdDialog', '$mdBottomSheet', '$timeout', 'toastr', function($parse, $mdDialog, $mdBottomSheet, $timeout, toastr) {

    return {
        restrict: 'A',
        link: function($scope, el, attrs) {
            var setter = $parse(attrs.edFileUploader)($scope);

            $(el[0]).on('change', function(e) {

                var reader = new FileReader();

                    if (setter) {
                        setter(event.target.result, el);

                        if (typeof attrs.edCloseAfter !== 'undefined') {
                            $mdBottomSheet.hide();
                        }
                    }
                };

                reader.onprogress = function(data) {
                    if (data.lengthComputable) {
                        var progress = parseInt(((data.loaded / data.total) * 100), 10);
                        // $scope.progress = progress;
                    }
                }

                if (e.target.files[0] != undefined) {
                    reader.readAsDataURL(e.target.files[0]);
                    $scope.loading = false;
                    el.next().removeClass('loading');
                    $scope.done = true;
                } else {
                    $scope.loading = false;
                    el.next().removeClass('loading');
                    $scope.done = true;
                }
            });

        }
    }
}]);

How to pass variable progress from the reader.onprogress so that it progress bar would work as expected?

Here's good example jsfiddle.net/maxisam/QrCXh

artgb
– artgb

2017-08-26 02:18:36 +00:00
Commented Aug 26, 2017 at 2:18 — artgb
– artgb, Commented Aug 26, 2017 at 2:18

Kunvar Singh · Accepted Answer · 2017-08-26 03:08:04Z

0

See this: (http://jsfiddle.net/L8masomq/)

Here we use the method for sending data from direcctive to controller. Here Test is the element directive and attribute is data-method="ctrlFn"

may this help,

answered Aug 26, 2017 at 3:08

Kunvar Singh

1,8852 gold badges16 silver badges21 bronze badges

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

1 Comment

funguy Over a year ago

This actually helped. Thanks.

Collectives™ on Stack Overflow

How to pass data from directive to controller with angularjs? [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related