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

Question

我一直有一个问题，试图保持我的模型与我的控制器分开，因为模型和视图之间缺乏同步。我环顾四周，发现大部分时间适用于解决问题。然而，申请对我来说根本不起作用（无论是从根作用域调用还是使用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