Trigger.io + Angular.js并在调用forge.ajax后更新视图

Question

遇到问题,到目前为止无法为看似相似的SO问题找到解决方案.问题是这样的:

使用Trigger.io的forge.ajax,我的Angular.js视图在返回数据后不会更新.我意识到这是因为forge.ajax是一个异步函数,并且在已经显示视图后返回数据.我试图通过使用$ rootScope.apply()更新视图,但它对我不起作用,如我所看到的许多示例中所示.

请参阅下面的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(),但无法使视图更新.如果你有任何想法我可以让它工作,我将不胜感激.

编辑:添加HTML

HTML在下面.注意按钮的ng-click ="refresh()".这只是一种解决方法,所以我至少可以看到数据.它调用一行刷新函数,执行$ rootScope.apply(),它会更新视图.

   <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必须在角度范围内进行所有更改,在这种情况下,因为您使用forge回调调用ajax请求不在角度框架内执行,这就是它无法正常工作的原因.

在这种情况下,您可以使用$ scope.$ apply()来执行angular framework中的代码.

看看$apply()方法doc

$ apply()用于从角度框架外部以角度执行表达式.(例如,来自浏览器DOM事件,setTimeout,XHR或第三方库).因为我们正在调用角度框架,所以我们需要执行异常处理的适当范围生命周期,执行手表.