asynchronous - Trigger.io + Angular.js 并在调用 forge.ajax 后更新 View

Question

遇到问题，到目前为止无法为看似相似的问题找到任何解决方案。问题是这样的:

使用Trigger.io的forge.ajax，我的Angular.js View 在数据返回后没有更新。我意识到这是因为 forge.ajax 是一个异步函数，并且数据在 View 显示后返回。我尝试使用 $rootScope.apply() 来更新 View ，但它对我不起作用，如我见过的许多示例所示。

请参阅下面的 Controller 代码:

function OfferListCtrl($scope) {

   $scope.offers = [];

   $scope.fetchOffers = function(callback) {

       $scope.offers  = [];

       var successCallback = function(odataResults) {
           var rawJsonData = JSON.parse(odataResults);
           var offers = rawJsonData.d;
           callback(offers);
        };

       var errorCallback = function (error){
            alert("Failure:" + error.message);
       };

       forge.request.ajax({
           type: 'GET',
           url: 'https://www.example.com/ApplicationData.svc/Offers',
           accepts: 'application/json;odata=verbose',
           username: 'username',
           password: 'password',
           success: successCallback,
           error: errorCallback
       });

    };

    $scope.fetchOffers(function(offers) {
        $scope.offers = offers;
        forge.logging.info($scope.offers);
    });
}

那里的所有代码都可以正常工作，并且 $scope.offers 会使用数据库中的 Offer 数据进行填充。日志功能显示数据正确且格式正确。

我尝试在逻辑位置(和一些不合逻辑的位置)使用 $rootScope.apply()，但无法更新 View 。如果您对如何让它发挥作用有任何想法，我将不胜感激。

编辑:添加 HTML

HTML 如下。请注意带有 ng-click="refresh()"的按钮。这只是一个解决方法，所以我至少可以看到数据。它调用执行 $rootScope.apply() 的单行刷新函数，该函数会更新 View 。

   <div ng-controller="OfferListCtrl">
        <h1>Offers</h1>
      <ul>
        <li ng-repeat="offer in offers">
            <p>Description: {{offer.Description}}<br />
               Id: {{offer.Id}}<br />
              Created On: {{offer.CreatedOn}}<br />
              Published: {{offer.Published}}<br />
            </p>
        </li>
      </ul>
  <input type="button" ng-click="refresh()" value="Refresh to show data" />
    </div>

Answer 1

你需要改变

$scope.fetchOffers(function(offers) {
    $scope.$apply(function(){
        $scope.offers = offers;
    });
    forge.logging.info($scope.offers);
});

这是因为对 $scope 的所有更改都必须在 Angular 范围内进行，在这种情况下，因为您使用 forge 调用 ajax 请求，所以回调不是在 Angular 框架内执行，这就是它不起作用的原因。

您可以使用$scope.$apply()在本例中是在 Angular 框架内执行代码。

查看$apply()方法文档

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life-cycle of exception handling, executing watches.