Angularjs通过$http刷新视图.插入数据库后获取服务

Angularjs refresh view via $http.get service after database insertion

本文关键字:数据库 获取 服务 插入 新视图 通过 http 刷新 Angularjs      更新时间:2023-09-26

请帮忙!我都快把头发扯掉了。我为此尝试了很多教程,但似乎没有任何东西可以远程工作。

用户可以在页面上添加/删除/更新用户信息,我希望每当他们执行这些操作之一时它都会刷新。所有的动作都写到DB很好,我有各种各样的成功与得到的值回来,但我不能得到视图实时更新。

我不能使用$scope.$apply();$digest正在处理中。

我觉得好像缺少了什么重要的东西。

服务
angular.module('userlistFactory', [])
    .service('Data', function($http){
        this.list = function(){
            return $http.get('.../getUsers.php', {cache: true})  
            .then(function(data){
                return data.data;
            });
        }
控制器

userlistControllers.controller('UserListCtrl', ['$scope', 'Data', function ($scope, Data){
  Data.list().then(function (data) {   // Populates the page the first time through
    $scope.users = data;
  })
  $scope.$watch('Data.list()', function(newValue){  // At this point, I don't understand
    $scope.users = newValue;
  }, true);
视图

<tr ng-repeat-start="user in users| filter:query | orderBy:'id'">
    <td><a href="#/profile/{{user.id}}">{{user.id}}</a></td>
    <td>{{user.firstname}}</td>  // etc...

当您返回$http对象并在作用域中设置回调时,除非您想处理.fail()或进行进一步处理,否则不需要在服务中处理回调。它甚至可能是导致错误的返回。

angular.module('userlistFactory', [])
.service('Data', function($http){
    this.list = function(){
        return $http.get('.../getUsers.php', {cache: true});
        }
    });

获取用户的调用看起来不错,但它只会运行一次。如果您希望在数据库更改后调用它进行更新,则需要将其放入方法

中。
    function UpdateUsers(){         
      Data.list().then(function (data) {
         $scope.users = data;
         $scope.$apply();  //Because it was asynch
      });
    }

你可以去掉$watch部分

现在,当你的用户添加,删除,等等,你只需调用你的updatusers方法和同步请求将启动。当它返回$scope时。用户将被更新,$scope.$apply()将调用更新页面的摘要循环。

当然,你希望你的列表立即更新,因为你甚至在评论。要做到这一点,只需调用控制器中的方法。

    UpdateUsers();

$http对象似乎有点令人困惑。您正在返回对象,并通过添加.then(....)您正在登记您的回电。大多数代码示例一次都显示了它$http(…).then(…),但在您的情况下,您在服务中创建它并返回对象,然后在控制器上注册回调。$http ---->回到控制器add .then(…),所以你不需要在两个地方处理它。你怎么能处理失败(…)如果你需要处理,也可以在任何你想要的地方。

为了消除对$watch的一些混淆。Angular只关心被绑定的东西。如果我有一个没有在任何地方使用的值,但如果它发生变化,我想做一些事情,那么我需要$watch它的变化。这是因为没有事件或任何东西来触发代码。当你将$watch绑定到某个对象时,它会自动添加$watch,因为它会在摘要循环中为它添加$watch,这样它就可以更新任何需要更新的内容。