angularjs從http json更新模型視圖

Question

大家好我正在學習角我寫了一個簡單的應用程序，但我不知道如何更新模型或視圖，以後得到http json。 consulta.php的

angular.module("dataApp",[]) 

.controller("ctrlData",function($scope,$http){ 
    $http.get('consulta.php') 
    .success(function(data){ 
     //console.log(data); 
     $scope.personas = data; 
    }).error(function(error){ 
     console.log(error); 
    }); });//end ctrl 

輸出

[ 
    { 
     "id_persona":"1", 
     "nombre":"sebastian", 
     "apellido":"rincon ", 
     "telefono":"4422404", 
     "direccion":"calle 93 # 23 2132" 
    }, 
    { 
     "id_persona":"2", 
     "nombre":"leiton", 
     "apellido":"aricapa", 
     "telefono":"4421112313", 
     "direccion":"calle 634 supia avenia 93" 
    }, 
    { 
     "id_persona":"3", 
     "nombre":"daniel", 
     "apellido":"desconocido", 
     "telefono":"645452423", 
     "direccion":"urbanizacion los vientos 123" 
    }, 
    { 
     "id_persona":"4", 
     "nombre":"angularjs", 
     "apellido":"javascript", 
     "telefono":"0231391", 
     "direccion":"module controller 321" 
    }, 
    { 
     "id_persona":"5", 
     "nombre":"mark", 
     "apellido":"zuckerberg", 
     "telefono":"423423423", 
     "direccion":"palo alto california" 
    } 
] 

的index.html

<tr ng-repeat="persona in personas"> 

      <td>{{persona.id_persona}}</td> 
      <td>{{persona.nombre}}</td> 
      <td>{{persona.apellido}}</td> 
      <td>{{persona.telefono}}</td> 
      <td>{{persona.direccion}}</td> 
</tr> 

一切運作良好，但如果我在mysql數據庫angularjs插入新行會不知道呢，我需要刷新頁面才能查看新行。 對於另一方面我想setTimeout函數

setTimeout(function(){ 

    $http.get('consulta.php') 
    .success(function(data){ 
     console.log(data); 
     $scope.personas = data; 
    }).error(function(error){ 
     console.log(error); 
    }); 

},1000); 

，但我認爲這是不是正確的！請幫助謝謝。

Answer 1

您需要再次調用服務才能更新視圖。

當您在控制器中編寫$http.get()調用時，只有在視圖加載時纔會調用它。之後，它不叫。

您可以使用類似setInterval的內容來週期性地調用您的服務。

angular.module("dataApp",[]) 
.controller("ctrlData",function($scope,$http){ 
    setInterval(function(){ 
     $http.get(...) 
    }, 60000); 
}); 

這會每分鐘致電您的服務以更新您的視圖。

但是，請注意，您不應該直接在控制器中使用$ http;而是使用服務。

Answer 2

如果您希望您的Web應用程序對服務器端更改做出反應，您需要類似Web套接字或類似的東西，或定期輪詢API。我認爲在這一點上，第一個（最好的）選項對你來說可能有點太複雜，所以第二個選項就沒有了。

在開始實施這樣的事情之前，您必須確定您確實需要您的視圖來響應更改，而無需用戶交互。爲什麼僅僅等待用戶刷新（或改變路線）是不夠的？

不管怎麼說，這裏是你可以創建一個服務來輪詢API，用於數據的一種方法：

angular.module('dataApp').service('personaService', PersonaService); 

function PersonaService($http, $q, $interval){ 
    var pollingInterval; 

    this.getConsulta = getConsulta; 
    this.startGetConsulta = startGetConsulta; 
    this.stopGetConsulta = stopGetConsulta; 

    function startGetConsulta(interval){ 
     if(pollingInterval){ 
      return $q.resolve(); 
     } 
     var deferred = $q.defer(); 

     // Get first time 
     getConsulta().then(function(data){ 
      deferred.notify(data); 
     }, function(response){ 
      deferred.reject(response); 
     }); 
     // Start polling 
     pollingInterval = $interval(function(){ 
      getConsulta().then(function(data){ 
       deferred.notify(data); 
      }, function(response){ 
       deferred.reject(response); 
      }); 
     }, interval); 

     return deferred.promise; 
    } 

    function stopGetConsulta(){ 
     if(angular.isDefined(pollingInterval)) { 
      $interval.cancel(pollingInterval); 
     } 
     pollingInterval = null; 
    } 

    function getConsulta(){ 
     return $http.get('consulta.php') 
      .then(function(response){ return response.data; }); 
    } 
} 

要使用它，你會注入中到控制器中，並開始輪詢是這樣的：

angular.module("dataApp",[]) 
.controller("ctrlData",function($scope, personaService){ 

    personaService.startGetConsulta(60000).then(null, null, function(data){ 
     $scope.personas = data; 
    }); 

}); 

請注意，由於我們使用notify而不是resolve，對於服務返回的承諾，我們在使用.then(..)函數中的承諾時使用第三個notify-callback。

這應該做到這一點。但只是爲了鞏固一切 - 不要盲目地使用它。首先確保你真的需要你的觀點是這種反應。然後確保你真正理解了上面示例中的情況。

Here's a plunker showing this in action