填充带有AngularJS的选择选项的扫描仪阵列

Question

我正在使用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}]"

更新：添加了请求的信息

Answer 1

当第三方代码更新范围数据时，您需要发射角消化周期才能生效，因为Angular不知道已经进行了更改。

调用$摘要或$ apply告诉Angular更新和发射任何手表。

$scope.asyncSources = angular.copy(arr);
$scope.$apply();

，如果您试图并行执行此操作，则还可以将Angular $超时功能的更改包装在Angular $超时函数中，以防止"错误：$ impoest"。

$timeout(function(){
  $scope.asyncSources = angular.copy(arr);
});