hussain hussain - 3 months ago 17
AngularJS Question

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

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>

Answer

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>
Comments