AngularJS 调用作用域函数来“刷新”作用域模型答案

【问题标题】：AngularJS call scope function to 'refresh' scope modelAngularJS 调用作用域函数来“刷新”作用域模型
【发布时间】：2015-11-28 03:51:51
【问题描述】：

我已经为此苦苦挣扎了几天，似乎找不到解决方案。我的视图中有一个简单的列表，从 MongoDB 获取，我希望它在我调用删除或更新函数时刷新。虽然我应该能够在同一范围内调用先前声明的函数似乎很简单，但它根本不起作用。

我尝试在第三个服务上设置 getDispositivos，但随后注入变得一团糟。将函数简单地声明为 var function () {...} 但它不起作用。

感谢任何帮助。

这是我的代码：

var myApp = angular.module('appDispositivos', []);

    /* My service */
    myApp.service('dispositivosService', 
        ['$http',
            function($http) {
                //...

            this.getDispositivos = function(response) {
                $http.get('http://localhost:3000/dispositivos').then(response);     
            }

            //...
        }
    ]
);

myApp.controller('dispositivoController',
    ['$scope', 'dispositivosService',
        function($scope, dispositivosService) {

            //This fetches data from Mongo...
            $scope.getDispositivos = function () {
                dispositivosService.getDispositivos(function(response) {
                    $scope.dispositivos = response.data;
                });
            };

            //... and on page load it fills in the list
            $scope.getDispositivos();

            $scope.addDispositivo = function() {
                dispositivosService.addDispositivo($scope.dispositivo);
                $scope.getDispositivos(); //it should reload the view here...
                $scope.dispositivo = '';
            };

            $scope.removeDispositivo = function (id) {
                dispositivosService.removerDispositivo(id);
                $scope.getDispositivos(); //... here
            };

            $scope.editDispositivo = function (id) {
                dispositivosService.editDispositivo(id);
                $scope.getDispositivos(); //... and here.
            };
        }
    ]
);

【问题讨论】：

尝试调用 $scope.getDispositivos();在您收到添加删除或编辑的响应后

标签： angularjs node.js rest mean

【解决方案1】：

服务中

this.getDispositivos = function(response) {
            return $http.get('http://localhost:3000/dispositivos');     
        }

在控制器上

$scope.addDispositivo = function() {
            dispositivosService.addDispositivo($scope.dispositivo).then(function(){
            $scope.getDispositivos(); //it should reload the view here...
            $scope.dispositivo = '';
    });     
};

【讨论】：

【解决方案2】：

所有解决方案均无效。后来我发现 GET 请求确实执行，但是是异步的。这意味着它会在 POST 请求完成之前将数据加载到 $scope 中，因此不包括刚刚包含的新数据。

解决方案是使用 $q 模块同步任务（有点像多线程编程），并使用延迟对象和承诺。所以，在我的服务中

.factory('dispositivosService',
['$http', '$q',
    function($http, $q) {
        return {
            getDispositivos: function (id) {
                getDef = $q.defer();
                $http.get('http://myUrlAddress'+id)
                .success(function(response){
                    getDef.resolve(response);
                })
                .error(function () {
                    getDef.reject('Failed GET request');
                });
                return getDef.promise;
            }
            }
        }
    }
])

在我的控制器上：

$scope.addDispositivo = function() {
            dispositivosService.addDispositivo($scope.dispositivo)
            .then(function(){
                dispositivosService.getDispositivos()
                .then(function(dispositivos){
                    $scope.dispositivos = dispositivos;
                    $scope.dispositivo = '';
                })
            });
        };

作为我的“响应”对象 $q.defer 类型的对象，然后我可以告诉 Angular 响应是异步的，并且 .then(---).then(---);当异步请求完成时，逻辑完成任务。

【讨论】：