AngularJS：在 $resource POST 和 $scope 更新后中继器不更新答案

【问题标题】：AngularJS : Repeater not updating after $resource POST and $scope is updatedAngularJS：在 $resource POST 和 $scope 更新后中继器不更新
【发布时间】：2015-09-29 20:32:31
【问题描述】：

在将许多 google 结果链接变为紫色后。我发现自己被难住了。

我设置了一个 $resource 用于与我设置的 contacts api 端点（Laravel 后端）进行交互。查询要在页面上显示的初始联系人非常有用。我什至可以发送要创建的新联系人，但是在我发送 POST 请求以创建新联系人后，联系人并没有更新。

联络人 var contactCtrl = angular.module('contactCtrl', ['ngResource']);

    contactCtrl.controller('contactController', ['$scope', '$http', 'Contact', 'ContactRest', 'routeBase', function($scope, $http, Contact, ContactRest, routeBase) {

        $scope.contacts = [];
        // $scope.contacts is updated with all of the contacts for /activity/1
        ContactRest.getResource({'resource_type' : 'activity', 'resource_id' : '1'}, function(contacts) {
            $scope.contacts = contacts;
        }, function() {
            console.log('contacts loading failed');
        });


        $scope.contact = new ContactRest();

        // Action to send a request to create a new contact for /activity/1
        $scope.add = function(contact, resource_type, resource_id) {

            console.log('submitting the contact: ', contact);
            contact.$add({ 'resource_type' : resource_type, 'resource_id' : resource_id });

            $scope.contacts.push(contact);
            console.log('current contacts in scope are', $scope.contacts);
            $('#contactModal').modal('hide');

        }
    }]);

联系 Restful 服务

  .factory('ContactRest', ['$resource', '$location', function($resource, $location) {
    var host = $location.host()
    baseUrl = 'http://' + host;

  return $resource('http://' + host + '/api/contact', { }, {
    // Get all contacts belonging to a resource
    getResource : { 
        method : 'GET', url : 'http://' + host + '/api/:resource_type/:resource_id/contact', 
        params : {'resource_type' : '@resource_type' , 'resource_id' : '@resource_id' },
        isArray: true,
    },
    // Add a contact to a resource
    add: { 
        method : 'POST', 
        url : baseUrl + '/api/contact/add/:resource_type/:resource_id',
        params : {'resource_type' : '@resource_type', 'resource_id' : '@resource_id'} }
  });
}]);

$scope 在我发送请求后更新。我已经测试过几次了。似乎视图中的中继器不会随着控制器中的 $scope.contacts 更新而改变。我有什么遗漏吗？

【问题讨论】：

代替$scope.contact = new ContactRest(); 做$scope.contact = ContactRest;

标签： angularjs angularjs-scope angularjs-ng-repeat angular-resource

【解决方案1】：

这可能是因为您的$add 函数是async ajax 调用。这意味着您只在服务器使用contact json 响应之后调用$scope.contacts.push(contact);。

在$add 函数的callback 事件期间尝试推送。

例如

...
add: { 
            method : 'POST', 
            url : baseUrl + '/api/contact/add/:resource_type/:resource_id',
            params : {'resource_type' : '@resource_type', 'resource_id' : '@resource_id'} }
      }, callback_function_here);
...

要使其可重用，请在函数调用期间传递回调，例如

contact.$add({ 'resource_type' : resource_type, 'resource_id' : resource_id }, 
    function (response) {
        $scope.contacts.push(response);
    }
);

【讨论】：

嗯，有道理。那么callback 不是必须知道我的控制器的$scope 吗？如果我尝试将此 $resource 与其他控制器/模块一起使用，这会导致问题吗？
@DylanPierce 可以在函数调用时传入回调函数。例如contact.$add({ 'resource_type' : resource_type, 'resource_id' : resource_id }, callback_function_here);
对不起，出于某种原因，我认为您的意思是将回调放在 $resource 定义中，而不是控制器中的实例。我的问题是我在页面上的不同元素上使用了相同的控制器（一个在列表上，另一个在未连接的模式上），它创建了 2 个控制器和 2 个不同的范围。回调按预期工作，但与原始控制器的工作范围不同。

【解决方案2】：

问题是我使用了同一控制器的 2 个不同实例。显然，这创建了 2 个不同的范围。控制器/资源中的一切都在正常工作，这是一个实现问题。

【讨论】：