使用回调数据时，“控制器”中角模式 [英] Data in callback when using 'Controller as' pattern in Angular

问题描述

我有最简单的角度控制器：

I have the simplest angular controller:

tc.controller('PurchaseCtrl', function () {
    var purchase = this;
    purchase.heading = 'Premium Features';

    this.onSuccess = function (response) {
      console.log('Success', response);
      lib.alert('success', 'Success: ', 'Loaded list of available products...');
      purchase.productList = response;
    };
    this.onFail = function (response) {
      console.log('Failure', response);
    };

    console.log('google.payments.inapp.getSkuDetails');
    lib.alert('info', 'Working: ', 'Retreiving list of available products...');
    google.payments.inapp.getSkuDetails(
      {
        'parameters': {'env': 'prod'},
        'success': purchase.onSuccess,
        'failure': purchase.onFail
      });

  });

和视图：

<div class="col-md-6 main" ng-controller="PurchaseCtrl as purchase">
    {{purchase}}
</div>

这打印出：

{标题：premium功能}

{"heading":"Premium Features"}

我认为，当回调返回，视图将与任何新的数据更新。我缺少的东西吗？回调回报，我看到了DTAA在控制台中。

I thought that when the callback returned, the view would be update with any new data. Am I missing something? The callback returns and I see the dtaa in the console.

使用我想我会用$范围$范围的模式。$适用于异步方法，但我不知道怎么做，在这里。

Using the $scope pattern I think that I would use $scope.$apply to async method, but I'm not sure how to do that here.

推荐答案

使用 controllerAs 不改变的方式消化周期工程或任何东西。这只是（如果使用的名称相同的别名），增加了一个属性，其价值指向控制器实例引用当前范围中的糖。所以，你需要手动调用摘要周期（使用范围。$应用[ASYC]（），甚至与虚拟 $超时（角。空操作，0）或 $ q.when（）在这种情况下等），以及。但你可以避免抽象出来成一个角度的服务，并从那里返回一个承诺注入范围，即

Using controllerAs does not change the way digest cycle works or anything. It is just a sugar that adds a property (with the name same as alias name when used) to the current scope with its value pointing to the controller instance reference. So you would need to manually invoke the digest cycle (using scope.$apply[Asyc]() or even with a dummy $timeout(angular.noop,0) or $q.when() etc) in this case as well. But you can avoid injecting scope by abstracting it out into an angular service and returning a promise from there, i.e

myService.$inject = ['$q'];
function myService($q){
  //pass data and use it where needed
  this.getSkuDetails = function(data){ 
     //create deferred object
     var defer = $q.defer();
     //You can even place this the global variable `google` in a 
     //constant or something an inject it for more clean code and testability.
     google.payments.inapp.getSkuDetails({
        'parameters': {'env': 'prod'},
        'success': function success(response){
            defer.resolve(response);// resolve with value
         },
        'failure': function error(response){
            defer.reject(response); //reject with value
         }
      });
     //return promise
     return defer.promise;
  }
}
//Register service as service

现在注入为myService 在你的控制器，并使用它为：

Now inject myService in your controller and consume it as:

   myService.getSkuDetails(data).then(function(response){
         purchase.productList = response;
   }).catch(function(error){
      //handle Error
   });

这篇关于使用回调数据时，“控制器”中角模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！