角度異步加載的變量未在視圖中更新

Question

我正在嘗試使異步工作在有角度的環境中，但是還不能完全正常工作。 但是幾乎。

我試圖將我的代碼壓縮到最低限度：

<div ng-controller="GeoSelectController">
    <div>
        Select country:<br/>
        <select multiple required size="10" ng-model="geoFilter" ng-options="geo.name as geo.descr for geo in geos"></select>
        <p>You selected {{geoFilter}}.</p>
    </div>
</div>

<script type="text/javascript" src="js/vendor/jQuery/jquery-2.1.1"></script>
<script type="text/javascript" src="js/vendor/angular/angular.min.js"></script>
<script type="text/javascript" src="js/customModule.js"></script>
<script type="text/javascript">

    var app = angular.module("myApp", []);
    var cm = customModule();

    app.controller("GeoSelectController", function ($scope) {
        //some starting values.
        $scope.geos = [
            {name: "DE",  descr: "Germany"},
            {name: "NL",  descr: "Netherlands"}
        ];
        $scope.geoFilter = ["NL"];

        //asynchronously get actual values.
        cm.doAsync("nrg_100a", function(error){
            if (error) {alert(error); return;}
            $scope.geos = cm.getSomeData("nrg_100a", "GEO");
        });

    });

</script>

這里的問題是cm.doAsync()部分。 發生的情況是geos變量已更新，但是直到單擊選擇框后，該變量才顯示在視圖中。 我錄制了一個截屏視頻以澄清：

（如果單擊已經選擇的“荷蘭”，則選擇框的選項甚至都不會更新。）

我曾嘗試將整個產品放入工廠，但無濟於事，我也不認為這是必要的。 如果您認為這是關鍵，那么請解釋為什么是這樣； 我會很樂意發布同樣失敗的代碼。

多謝你們！

Answer 1

這很可能是因為doAsync沒有在角度范圍內運行。 這意味着digest循環不會在工作完成后發生。 您可以通過使用$scope.apply()手動強制摘要循環並更新綁定來解決此問題。

    cm.doAsync("nrg_100a", function(error){
        if (error) {alert(error); return;}
        $scope.geos = cm.getSomeData("nrg_100a", "GEO");
        $scope.$apply(); //<--- here
    });

如果它正在執行異步操作（並且您可以更改自定義模塊），則可以使用$q角度版本來使用Promise模式，而無需執行此步驟。 如果您正在執行http調用，則可以使用$http並在諾言中鏈接，一旦諾言被解決/拒絕，綁定將自動更新。

創建一個服務來包裝您的非角度服務：

MyService.$inject = ['$q', '$window'];

function MyService($q, $window){

   this.getGeos = function(value1, value2) {
        var def= $q.defer();
        var cm = $window.customModule();
        cm.doAsync(value, function(error){
            if (error) {
               def.reject(error); //<-- reject the promise
            }
            var value = cm.getSomeData(value1, value2);
            def.resolve(value);
        });
      return def.promise;
   }
}

angular.module("myApp").service('MyService', MyService);

並將其用作：-

app.controller("GeoSelectController", ['$scope', 'MyService',function ($scope, myService) {
    //some starting values.
    $scope.geos = [
        {name: "DE",  descr: "Germany"},
        {name: "NL",  descr: "Netherlands"}
    ];
    $scope.geoFilter = ["NL"];
    myService.getGeos("nrg_100a", "GEO").then(function(result){
        $scope.geos = result; //set the result
    }).catch(function(error){
       alert(error); //Handle Error
    })
}]);