Question

由于模型和视图之间缺乏同步，我一直在尝试将模型与控制器分开。我环顾四周，发现大部分时间申请都可以解决问题。但是，apply对我来说根本不起作用（无论是从根范围调用还是使用chrome调用相关范围）。在这个link中，我有一个关于我的程序问题的演示，但是不是间隔，我的程序有异步请求，或者只是复杂的函数，似乎也被错过了。在演示中，我有4个变量应该在视图上更新。范围正在观看的另一个，通过回调更新的另一个，另一个仅仅依赖于模型，另一个通过将范围本身传递给服务来更新。在4中只有回调并将范围传递给服务的是更新视图的那些，即使我在每次更新后运行应用（在每次执行$ interval之后已经运行的那个）。我试图避免的是每当我的数据由于转换而改变时使用大量的回调或承诺，因为我有许多可能的不同转换。无论如何要做到这一点，还是回调并承诺唯一的选择？

var test = angular.module("tpg",[]);
test.controller("myctrl", function($scope, $interval, service)
{
  $scope.$watch(service.list.name, function()
  {
    $scope.name=service.list.name;
  });

  $scope.op=service.list.op;

  $scope.call=service.list.call;

   $scope.scope=service.list.test;

  $scope.update=function()
  {
    service.getValues(function(op){$scope.op=op}, $scope);
  };
}).factory("service", function($interval, $rootScope)
{
  return {
    list:{name:"OPA", op:"TAN", call:"1", test:"scope"},
    getValues:function(callback, $scope)
    {
      var self=this;
       var interval = $interval(function()
        {
          if(self.count>2)
          {
            $interval.cancel(interval);
            self.count=0;
            self.list={name:"OPA", op:"TAN", call:"1"};
          }
          else
          {
            self.list=self.values[self.count];
            callback(self.list.op);
            $scope.scope=self.list.test;
            console.log(self.list);
            self.count++;
          }
          $rootScope.$$phase || $rootScope.$apply();
        },2000);


    },
    values: [{name:"guy", op:"ungly", call:"2", test:"scope1"}, {name:"TAL", op:"stink", call:"3", test:"scope2"}, {name:"tes", op:"test", call:"4", test:"scope3"}],
    count:0
  };
});

Answer 1

您只需要从服务返回一个回调函数。处理角度服务时不需要$ scope。$ apply，因为服务本身会触发摘要运行。所以我修改了代码以删除$ apply和promise，并从服务返回一个简单的回调，然后用返回的数据更新视图。

代码：

$scope.update=function()
  {
    service.getValues(function(data){
      $scope.name = data.name;
      $scope.op=data.op;

    $scope.call=data.call;

   $scope.scope=data.test;
    });
  };
}).factory("service", function($interval, $rootScope)
{
  return {
    list:{name:"OPA", op:"TAN", call:"1", test:"scope"},
    getValues:function(callback){
      var self=this;
       var interval = $interval(function()
        {
          if(self.count>2)
          {
            $interval.cancel(interval);
            self.count=0;
            self.list={name:"OPA", op:"TAN", call:"1"};
          }
          else
          {
            self.list=self.values[self.count];
            console.log(self.list);
            callback(self.list);
            self.count++;
          }
        },2000);
    },
    values: [{name:"guy", op:"ungly", call:"2", test:"scope1"}, {name:"TAL", op:"stink", call:"3", test:"scope2"}, {name:"tes", op:"test", call:"4", test:"scope3"}],
    count:0
  };
});

Working plunkr

Angularjs不会更新异步模型更改的视图

1 个答案: