Угловая привязка строк не работает с ControllerAs vm

Question

Я пытаюсь выполнить двустороннюю привязку к строковой переменной на контроллере. Когда контроллер изменяет строку, она не обновляется сразу. Я уже запустил отладчик, и я знаю, что переменная vm.overlay.file изменена. Но он не обновляется в представлении ... он обновляется только в следующий раз, когда пользователь нажимает кнопку, которая запускает selectOverlayFile(), а затем представляет предыдущее значение vm.overlay.file

Здесь идет код :

(function() { 
angular 
.module("myapp.settings") 
.controller("SettingsController", SettingsController); 

SettingsController.$inject = []; 

function SettingsController() { 
    var vm = this; 

    vm.overlay = { 
     file: undefined, 
     options: { 
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY, 
      destinationType: Camera.DestinationType.DATA_URL 
     } 
    }; 
    vm.errorMessages = []; 
    vm.selectOverlayFile = selectOverlayFile; 
    vm.appMode = "photo"; 

    vm.appModes = ["gif-HD", "gif-video", "photo"]; 

    activate(); 

    function activate() { 

    } 

    function selectOverlayFile() { 
     navigator.camera.getPicture(successOverlay, errorOverlay, vm.overlay.options); 
    } 

    function successOverlay(imageUrl) { 
     //If user has successfully selected a file 
     vm.overlay.file = "data:image/jpeg;base64," + imageUrl; 
    } 

    function errorOverlay(message) { 
     //If user couldn't select a file 
     vm.errorMessages.push(message); 
    } 

    } 
})(); 

Спасибо!

Answer 1

Через пару часов в поиске проблемы и тестирования различных решений. Наконец я нашел его. Проблема заключалась в том, что когда navigator.camera.getPicture (successOverlay, errorOverlay, vm.overlay.options) вызывает функцию обратного вызова, она выходит из области AngularJS. Таким образом, нам нужно уведомить Angular об обновлении привязки из этих обратных вызовов с использованием $ scope. $ Apply():

(function() { 
angular 
.module("myapp.settings") 
.controller("SettingsController", SettingsController); 

SettingsController.$inject = ["$scope"]; 

function SettingsController($scope) { 
    var vm = this; 

    vm.overlay = { 
     file: undefined, 
     options: { 
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY, 
      destinationType: Camera.DestinationType.DATA_URL 
     } 
    }; 
    vm.errorMessages = []; 
    vm.selectOverlayFile = selectOverlayFile; 
    vm.appMode = "photo"; 

    vm.appModes = ["gif-HD", "gif-video", "photo"]; 

    activate(); 

    /////////////////// 

    function activate() { 

    } 

    function selectOverlayFile() { 
     navigator.camera.getPicture(successOverlay, errorOverlay, vm.overlay.options); 
    } 

    function successOverlay(imageUrl) { 
     //If user has successfully selected a file 
     vm.overlay.file = "data:image/jpeg;base64," + imageUrl; 
     $scope.$apply(); 
    } 

    function errorOverlay(message) { 
     //If user couldn't select a file 
     vm.errorMessages.push(message); 
     $scope.$apply(); 
    } 

    } 
})();