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