使用 AngularJS 填充 Select 选项的扫描仪源数组
Populate an array of Scanner Sources for Select Options with AngularJS
我正在开发一个用于扫描和上传文档的 Web 界面,该界面使用 AngularJS 客户端和 Dynamsoft 的 Dynamic Web TWAIN 与扫描仪进行交互。
我正在尝试使用从 Dynamsoft 的 DWObject 检索到的可用源数组来填充 <select>
,但选项没有被填充。
我认为问题可能是 DWObject 在页面加载后初始化,但我可能错了。 (我是 AngularJS 的新手)。
这是我的代码:
HTML
<select ng-options="item.label for item in asyncSources track by item.value" ng-model="source">
<option value="">Select Option</option>
</select>
JavaScript
function scannerController($scope) {
// Register OnWebTwainReady event. This event fires as soon as Dynamic Web TWAIN is initialized and ready to be used
Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', $scope.Dynamsoft_OnReady);
// The DWObject is the object that interfaces with all scanner devices
var DWObject;
$scope.source = {
name: '',
value: 0
};
$scope.asyncSources = [];
// Load the scanner sources
$scope.loadSources = function () {
if (DWObject) {
var count = DWObject.SourceCount; // Populate how many sources are installed in the system
for (var i = 0; i < count; i++) {
arr.push({ label: DWObject.GetSourceNameItems(i), value: i })
}
$scope.asyncSources = angular.copy(arr);
}
}
// Initialise the Dynamsoft Scanner interface
$scope.Dynamsoft_OnReady = function () {
Dynamsoft.WebTwainEnv.Unload();
Dynamsoft.WebTwainEnv.Load();// load all the resources of Dynamic Web TWAIN
// Delay the retrieval of the Dynamic Web TWAIN Object until AngularJS had fully loaded the page template.
setTimeout(function () {
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');// Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'
if (DWObject) {
// Allow users to scan more than 2
DWObject.IfAllowLocalCache = true;
DWObject.SelectionImageBorderColor = 0xff0000;
$scope.loadSources();
// Try load settings from cookies first
getSourceFromCookie();
if ($scope.initialSettingsLoad) $scope.initializeSettings();
}
}, 2000);
}
asyncSources 填充了选项,但 select
选项未更新。
$scope.asyncSources
[[object Object],[object Object]]
[prototype]: []
length: 2
[0]: {...}
[1]: {...}
JSON.stringify($scope.asyncSources)
"[{\"label\":\"PaperStream IP fi-7160 #2\",\"value\":0},{\"label\":\"HP HD Webcam [Fixed]\",\"value\":1}]"
已更新:添加了请求的信息
当第 3 方代码更新范围数据时,您需要触发 Angular 摘要循环以使更改生效,因为 angular 不知道已进行更改。
调用 $digest 或 $apply 告诉 angular 更新并触发任何监视。
$scope.asyncSources = angular.copy(arr);
$scope.$apply();
您还可以将您的更改包装在 angular $timeout 函数中,以防止 "Error: $digest already in progress" 如果您尝试并行执行此操作。
$timeout(function(){
$scope.asyncSources = angular.copy(arr);
});
我正在开发一个用于扫描和上传文档的 Web 界面,该界面使用 AngularJS 客户端和 Dynamsoft 的 Dynamic Web TWAIN 与扫描仪进行交互。
我正在尝试使用从 Dynamsoft 的 DWObject 检索到的可用源数组来填充 <select>
,但选项没有被填充。
我认为问题可能是 DWObject 在页面加载后初始化,但我可能错了。 (我是 AngularJS 的新手)。
这是我的代码: HTML
<select ng-options="item.label for item in asyncSources track by item.value" ng-model="source">
<option value="">Select Option</option>
</select>
JavaScript
function scannerController($scope) {
// Register OnWebTwainReady event. This event fires as soon as Dynamic Web TWAIN is initialized and ready to be used
Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', $scope.Dynamsoft_OnReady);
// The DWObject is the object that interfaces with all scanner devices
var DWObject;
$scope.source = {
name: '',
value: 0
};
$scope.asyncSources = [];
// Load the scanner sources
$scope.loadSources = function () {
if (DWObject) {
var count = DWObject.SourceCount; // Populate how many sources are installed in the system
for (var i = 0; i < count; i++) {
arr.push({ label: DWObject.GetSourceNameItems(i), value: i })
}
$scope.asyncSources = angular.copy(arr);
}
}
// Initialise the Dynamsoft Scanner interface
$scope.Dynamsoft_OnReady = function () {
Dynamsoft.WebTwainEnv.Unload();
Dynamsoft.WebTwainEnv.Load();// load all the resources of Dynamic Web TWAIN
// Delay the retrieval of the Dynamic Web TWAIN Object until AngularJS had fully loaded the page template.
setTimeout(function () {
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');// Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'
if (DWObject) {
// Allow users to scan more than 2
DWObject.IfAllowLocalCache = true;
DWObject.SelectionImageBorderColor = 0xff0000;
$scope.loadSources();
// Try load settings from cookies first
getSourceFromCookie();
if ($scope.initialSettingsLoad) $scope.initializeSettings();
}
}, 2000);
}
asyncSources 填充了选项,但 select
选项未更新。
$scope.asyncSources
[[object Object],[object Object]]
[prototype]: []
length: 2
[0]: {...}
[1]: {...}
JSON.stringify($scope.asyncSources)
"[{\"label\":\"PaperStream IP fi-7160 #2\",\"value\":0},{\"label\":\"HP HD Webcam [Fixed]\",\"value\":1}]"
已更新:添加了请求的信息
当第 3 方代码更新范围数据时,您需要触发 Angular 摘要循环以使更改生效,因为 angular 不知道已进行更改。
调用 $digest 或 $apply 告诉 angular 更新并触发任何监视。
$scope.asyncSources = angular.copy(arr);
$scope.$apply();
您还可以将您的更改包装在 angular $timeout 函数中,以防止 "Error: $digest already in progress" 如果您尝试并行执行此操作。
$timeout(function(){
$scope.asyncSources = angular.copy(arr);
});