Javascript 如何从控制器中的ng change方法为隔离范围赋值?
一旦用户从下拉列表中选择了值,我就调用了ng change函数Javascript 如何从控制器中的ng change方法为隔离范围赋值?,javascript,angularjs,angular-directive-link,Javascript,Angularjs,Angular Directive Link,一旦用户从下拉列表中选择了值,我就调用了ng change函数onSizeChange并设置$scope.maxMb$scope.maxBytes$scope.FileSizeString,所以我的问题是,一旦从下拉列表中选择了值,我如何在指令中使用这些值。我试图将这些值绑定到隔离范围,但没有成功。基本上,我需要fileSize和fileValue在大小选择之后,我已经将其作为属性添加到html中的指令中,因此这些值应该绑定到隔离范围,但这正在发生。我如何解决此问题 指令.js angular.
onSizeChange
并设置$scope.maxMb
$scope.maxBytes
$scope.FileSizeString
,所以我的问题是,一旦从下拉列表中选择了值,我如何在指令中使用这些值。我试图将这些值绑定到隔离范围,但没有成功。基本上,我需要fileSize
和fileValue
在大小选择之后,我已经将其作为属性添加到html中的指令中,因此这些值应该绑定到隔离范围,但这正在发生。我如何解决此问题
指令.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>
{{downloadPercentage}}%
将文件大小更改为文件大小,将文件值更改为文件值
<progress-bar-custom ng-show="progressBarFlag" message="event" file-size="selectedFileSize.size" file-value="selectedFileSize.value"></progress-bar-custom>
与OP讨论后更新
仅在指令中传递selectedFileSize对象,而不是将其作为两个属性发送。您可以从指令中的selectedFileSize.size和selectedFileSize.value获取值。
然后查看指令中的selectedFileSize对象哪些值未按预期绑定?从指令代码中可以看出,大多数指令看起来都是正确的。scope.fileSize正在打印未定义的文件,scope.FileSizeString没有绑定它仍然没有定义,我看到的问题是先加载指令,然后从下拉列表中选择用户值。此时,没有方法调用和更新这些属性的值。这不应该是问题,未定义将出现,因为您可能没有在任何地方初始化selectedFileSize。尝试添加$scope.selectedFileSize={};开始时在您的控制器中。运气不好,您认为我们需要$watch吗,我们如何使用$watch来处理不在指令上的ng model
selectedFileSize
。它绑定正确吗?您是否可以尝试在html中执行{{selectedFileSize}},并验证当下拉值更改时,os的值和大小是否正确绑定?是的,当我更改值时,它会从控制器在控制台中打印