How to assign values to isolated scope from ng-change method in controller?

Question

Once user select value from dropdown i have ng-change function invoked onSizeChange and setting values of $scope.maxMb $scope.maxBytes $scope.FileSizeString, So my question how can i use these values in directive once value is selected from dropdown. i tried to bind these values to isolated scope but no luck. Basically i need fileSize and fileValue after size selection that i have added as an attribute to directive in html so these values should bind to isolated scope but that is happening.How can i resolve this problem ?

directive.js

angular.module("App").directive('progressBarCustom', function() {
    return {
        restrict: 'E',
        scope: {
            message: "=",
            fileSize: "=",
            fileValue: "="
        },
        templateUrl: '/view/partials/progressbar.html',
        controller: "StCtrl",
        link: function(scope, el, attrs) {
            console.log("file size", scope.fileSize);
            //these values should assign to directive template once user select value from dropdown
            //start 
            scope.maxMb = scope.fileSize;
            scope.maxBytes = 1000 * 1000 * scope.maxMb;
            scope.max = scope.maxBytes;
            scope.FileSizeString = scope.fileValue;
            // end 
            el.bind('click', function(event) {
                scope.$parent.startRecording();
                scope.$parent.stopLogs();
                scope.$parent.onSizeChange();
                console.log('EVENT', event);
            });
        };
    }
});

ctrl.js

  $scope.onSizeChange = function() {
       $scope.maxMb = $scope.selectedFileSize.size;
       $scope.maxBytes = 3000;
       $scope.max = $scope.maxBytes;
       $scope.FileSizeString = $scope.selectedFileSize.value;
       console.log('FileSize', $scope.maxMb);
   }

main.html

<div class="col-md-3">
    <select class="form-control" ng-model="selectedFileSize" ng-options="item as item.value for item in FileSizeOptions" ng-change="onSizeChange()"><option value="">Select</option></select>
</div>

<progress-bar-custom ng-show="progressBarFlag" message="event" fileSize="selectedFileSize.size" fileValue="selectedFileSize.value"></progress-bar-custom>

template.html

<uib-progressbar type="success" class="progress-striped" max="max" animate="true" value="dynamic"><span>{{downloadPercentage}}%</span></uib-progressbar>
<p class="pull-right bytes-progress-0"><small>Recorded <strong>{{currentBytes}}</strong> of <strong>{{FileSizeString}}</strong></small></p>

which values are not binding as expected? From what I can tell looking at the directive code, most of these look correct. — jusopi, Aug 26 '16 at 15:31
scope.fileSize is printing undefined and scope.FileSizeString is not binding — hussain, Aug 26 '16 at 15:33

Developer · Accepted Answer · 2016-08-28T17:51:01.200

3

Change fileSize to file-size and fileValue to file-value

<progress-bar-custom ng-show="progressBarFlag"     message="event" file-size="selectedFileSize.size" file-value="selectedFileSize.value"></progress-bar-custom>

Update after discussion with OP

Pass just selectedFileSize object in the directive instead of sending it as two properties. And you can get values from selectedFileSize.size and selectedFileSize.value inside directive. And then watch selectedFileSize object in the directive

edited Aug 28 '16 at 17:51

answered Aug 26 '16 at 16:01

Developer

6,240
3
18
24

its still coming undefined, problem i see is directive loads first and then user select value from dropdown at that point there is no method that invoke and update values for these attributes. – hussain Aug 26 '16 at 17:52
That shouldnt be a problem, undefined will come as you might not have initialized selectedFileSize any where. try adding $scope.selectedFileSize={}; in your controller at the beginning. – Developer Aug 26 '16 at 17:56
no luck , do you think we need $watch , how can we use $watch for ng-model `selectedFileSize` that is not on directive. – hussain Aug 26 '16 at 18:01
Is it binding properly? Could you try doing a {{selectedFileSize}} in html and verify the value and size os getting properly bound when dropdown value is changed? – Developer Aug 26 '16 at 18:04
Yes it is , when i change value it prints in console from controller – hussain Aug 26 '16 at 18:05
Try one thing, pass just selectedFileSize object in the directive instead of sending it as two properties. And you can get values from selectedFileSize.size and selectedFileSize.value inside directive – Developer Aug 26 '16 at 18:08
And then watch selectedFileSize object in the directive – Developer Aug 26 '16 at 18:09
Thanks watch worked for me instead of two attributes i have added one attribute to get object. – hussain Aug 26 '16 at 18:53

How to assign values to isolated scope from ng-change method in controller?

1 Answers1