如何在控制器中选择文件后调用指令?

时间:2016-08-25 16:56:18

标签: javascript angularjs angular-directive

我想在用户从下拉列表中选择文件大小时显示进度条,然后单击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>

0 个答案:

没有答案