Заполнение массива источников сканера для выбора параметров с помощью AngularJS

Question

Я работаю над веб-интерфейсом для сканирования и загрузки документов с использованием клиентской стороны AngularJS и Dynamic Web TWAIN от Dynamsoft для взаимодействия со сканером.

Я пытаюсь заполнить <select> массивом доступных источников, извлеченных из DWObject Dynamsoft, но параметры не заполняются. Я думаю, проблема может заключаться в том, что 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

Когда 3-обновляющая сторона коды данных резервированных вы должны стрелять Угловыми переваривать цикл для того, чтобы изменения вступили в силу, так как угловые не знают, что изменения были сделаны.

Вызов $ digest или $ apply указывает угловое обновление и запуск любых часов.

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

Вы также можете обернуть изменения в функции углового $ таймаута, чтобы предотвратить «Ошибка: $ переваривать уже в процессе», если вы пытаетесь сделать это параллельно.

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