How to invoke $scope function from angularjs directive?

Question

I know angularjs but this is first time i am writing angular directive so i am trying to create directive for progressbar everytime i receive message in controller based on that i am calculating string size and converting into bytes for progressbar.Problem with below code i see error $scope.random is not a function. Any idea what is implemented wrong ?

directive.js

angular.module("App").directive('progressBarCustom', function() {
    return {
        restrict: 'E',
        scope: {
            message: "="
        },
        templateUrl: '/view/partials/progressbar.html',
        controller: function($scope) {
            var data = $scope.message;
            var currentFileBytes = [];
            var currentBytesSum;
            $scope.maxBytes = 3000;
            getByteLen(data);
            $scope.random = function(value) {
                $scope.dynamic = value;
                $scope.downloadPercentage = parseFloat((value / $scope.maxBytes) * 100).toFixed(0);
                console.log('current value-dynamic', $scope.dynamic);
            };

            function getByteLen(normal_val) {
                // Force string type
                normal_val = String(normal_val);
                currentFileBytes.push(byteLen);
                currentBytesSum = currentFileBytes.reduce(function(a, b) {
                    return a + b;
                }, 0);
                $scope.random(currentBytesSum);
                formatBytes(currentBytesSum);
                return byteLen;
            }

            function formatBytes(bytes, decimals) {
                var data = parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
                console.log('sum of all the bytes', data);
                $scope.currentBytes = data;
            }
        }
    }
});

progressbar.html

<uib-progressbar type="success" class="progress-striped" max="max" animate="true" value="dynamic"><span>{{downloadPercentage}}%</span></uib-progressbar>

main.html

<progress-bar-custom message="event"></progress-bar-custom>

controller.js

$scope.event = ["lorem ipsum","lorem ipsum"];

Daniel A. White · Accepted Answer · 2016-08-25 14:04:55Z

1

You are calling getByteLen before $scope.random is assigned.

Use this instead:

        $scope.random = function(value) {
            $scope.dynamic = value;
            $scope.downloadPercentage = parseFloat((value / $scope.maxBytes) * 100).toFixed(0);
            console.log('current value-dynamic', $scope.dynamic);
        };
        getByteLen(data);

answered Aug 25, 2016 at 14:04

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

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

1 Comment

hussain Over a year ago

Perfect! Thanks for the help.

Collectives™ on Stack Overflow

How to invoke $scope function from angularjs directive?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related