Как назначить значения изолированной области видимости из метода ng-change в контроллере?

Как только пользователь выбрал значение из выпадающего меню, я вызвал функцию ng-change onSizeChange и установка значений $scope.maxMb$scope.maxBytes$scope.FileSizeStringИтак, мой вопрос, как я могу использовать эти значения в директиве, когда значение выбрано из выпадающего списка. я пытался привязать эти значения к изолированной области, но не повезло. В основном мне нужно fileSize а также fileValue после выбора размера, который я добавил в качестве атрибута директивы в html, поэтому эти значения должны быть привязаны к изолированной области, но это происходит. Как я могу решить эту проблему?

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>

1 ответ

Решение

Измените fileSize на file-size и fileValue на file-value

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

Обновление после обсуждения с ОП

Передайте объект selectedFileSize в директиву вместо того, чтобы отправлять его как два свойства. И вы можете получить значения из selectedFileSize.size и selectedFileSize.value внутри директивы. А затем смотреть объект selectedFileSize в директиве

Другие вопросы по тегам