我想在用户从下拉列表中选择文件大小时显示进度条,然后单击startRecording,然后我想调用指令。所以我试图隐藏进度条最初和文件选择显示进度条,因为它基于文件选择我在正在执行的指令控制器中有很多逻辑。用户应首先选择文件大小,然后调用progressbar指令。我怎样才能完成这项任务?
ctrl.js
$scope.startRecording = function () {
$scope.progressBarFlag = true;
}
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;
$scope.progressBarFlag = false;
var currentFileBytes = [];
var currentBytesSum;
$scope.maxBytes = 3000;
$scope.max = $scope.maxBytes;
$scope.FileSizeString = $scope.selectedFileSize.value;
}
});
main.html中
<div class="row">
<div class="col-md-8">
<div class="form-group">
<div class="col-md-3">
<label>Select File Size</label>
</div>
<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>
<div class="col-md-2">
<button type="button" class="btn btn-primary" ng-click="startRecording()">Start Recording</button>
</div>
</div>
</div>
</div>
<progress-bar-custom message="event" fileSize="selectedFileSize.size" fileValue="selectedFileSize.value"></progress-bar-custom>
progressbar.html
<div class="row" ng-show="progressBarFlag">
<div class="col-md-9">
<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>
</div>
</div>