AngularJS - 带有 Rails 3.2.3 的 $http POST

Question

我正在使用 AngularJS 1.0.0rc8 和 Crud 构建一个简单的联系人管理应用程序。

获取当前存在的联系人列表没有问题，但是在尝试将新联系人保存到服务器时，会创建一个新行 - 包含正确的 id、created_at 和 updated_at 值 - 但其余模型数据被忽略。

这是一个屏幕截图来说明我的意思：

如您所见，数字 4 和 5 被赋予了 ID，但 first_name、last_name 和 phone_num 并未保存到数据库中。

我在控制器中使用 $scope.addContact 函数来处理对象。

这是联系人列表控制器的完整代码：

'use strict';

function ContactListCtrl($scope, $http) {
  $http.get('/contacts').success(function(data) {
    $scope.contacts = data;
  });    

  $scope.addContact = function(data) {      

    $http.post('/contacts/', data).success(function(data) {
        console.log(data);
        data.first_name = $("#new_contact_first_name").val();
        data.last_name = $("#new_contact_last_name").val();
    });

    this.newFirstName = '';
    this.newLastName = '';
  };

};

在 new-contact.html 部分单击 'Save' 后，对象会记录到控制台，如果我检查其内容，那么肯定会收集值 - 请注意 Jimi Hendrix 是那里：

这是 new-contact.html 模板中显示的表单：

<form id="contact_form" ng-submit="addContact()">
            <input type="text" id="new_contact_first_name" name="newContactFirstName" ng-model="newFirstName" placeholder="First Name"></br>
            <input type="text" id="new_contact_last_name" name="newContactLastName" ng-model="newLastName" placeholder="Last Name"></br>
            <input type="button" id="contact_submit_btn" value="Add Contact" class="btn btn-primary">               
        </form>

addContact() 函数在使用 JQuery 提交表单后触发：

$(document).ready(function(){       

        $("#contact_submit_btn").click(function(){          
            $("#contact_form").submit();
        });
    });

---

（有些东西告诉我，我可能没有正确使用 ng-model 属性。）

关于我在哪里出错的任何想法？或者关于如何更好地实施此设计的想法？

谢谢。

---

以下更新：

这是我更新后的完整控制器代码 - 在 Sathish 的帮助下：

 // contacts controllers

'use strict';

function ContactListCtrl($scope, $http, Contacts) {   

  $scope.contacts = Contacts.index();  

  $scope.addContact = function() {
        var newContact = {
            first_name: $scope.newContactFirstName,
            last_name: $scope.newContactLastName
        };

        var nc = new Contacts({ contact: newContact });

        nc.$create(function() {
            $scope.contacts.push(nc);
            // now that the contact is saved, clear the form data
            $scope.newContactFirstName = "";
            $scope.newContactLastName = "";
            })
        }

};

ContactListCtrl.$inject = ['$scope', '$http', 'Contacts'];


function ContactDetailCtrl($scope, $routeParams, Contacts) {  
    $scope.contact = Contacts.get( {contact_id: $routeParams.contact_id} ); 
}

ContactDetailCtrl.$inject = ['$scope', '$routeParams', 'Contacts'];

我现在收到错误消息：未知的联系人提供程序。这是错误的截图

好的，我设法通过向主 App 文件提供 ngResource 来修复该错误。这是它的样子：

// main app javascript file

'use strict';

angular.module('contactapp', ['ngResource']).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/contacts', {template: 'assets/app/partials/contact-list.html',   controller: ContactListCtrl}).
      when('/contacts/new', {template: 'assets/app/partials/new-contact.html',   controller: ContactListCtrl}).
      when('/contacts/:contact_id', {template: 'assets/app/partials/contact-detail.html', controller: ContactDetailCtrl}).
      otherwise({redirectTo: '/contacts'});
}]);

我收到一个新错误：警告：无法验证 CSRF 令牌的真实性

好的，通过向 API 控制器添加回调也设法解决了这个问题： Rails shows "WARNING: Can't verify CSRF token authenticity" from a RestKit POST

现在我回到原来的问题。调用 create 方法时，会在数据库中保存一个新行，但模型数据不会。

太棒了……终于搞定了。

问题出在 $scope.addContact 函数上。它使用输入的“名称”而不是位于模板中的名为“newFirstName”和“newLastName”的 ng-model 绑定。

更新后的函数如下所示：

$scope.addContact = function() {
        var newContact = {
            first_name: $scope.newFirstName,
            last_name: $scope.newLastName
        };

        var nc = new Contacts({ contact: newContact });

        nc.$create(function() {
            $scope.contacts.push(nc);
            // now that the contact is saved, clear the form data
            $scope.newFirstName = "";
            $scope.newLastName = "";
            })
        }

Answer 1

使用联系人服务可以更好地实现这一点。请在 app/assets/javascripts/services.js.erb 中定义一个 Contacts 服务，如下所示：

var servicesModule = angular.module('<your app name>',
  [<list of modules needed by this app>]);

servicesModule.factory('Contacts', function($resource) {
  var ContactsService = $resource('/contacts/:contact_id', {}, {
    'create': { method: 'POST' },
    'index': { method: 'GET', isArray: true },
    'update': { method: 'PUT' },
    'destroy': { method: 'DELETE' }
  });
  return ContactsService;
});

改变控制器中的addContact方法如下图：

  function ContactListCtrl($scope, $http, Contacts) {
    ...
    ...
    ...
    $scope.addContact = function () {
      var newContact = {
        first_name: $scope.newContactFirstName,
        last_name: $scope.newContactLastName
      };

      var nc = new Contacts({ contact: newContact });
      nc.$create(function() {
        $scope.contacts.push(nc);
        // now that the contact is saved, clear the form data.
        $scope.newContactFirstName = "";
        $scope.newContactLastName = "";
      });
    };
    ...
    ...
    ...
  }
  ContactListCtrl.$inject = ['$scope', '$http', 'Contacts'];

除此之外，您还可以简化$http.get(...) 部分。你可以使用Contacts.index();

注意：

• 如果您提供了ng-app="MyAppName"，请将<your app name> 替换为MyAppName。
• <list of modules needed by this app> 需要替换为以逗号分隔的字符串列表，表示您的应用程序所需的任何模块。

Answer 2

检查您模型上的attr_accessible。有了新的 3.2.3 rails，所有模型属性都默认受到保护，不会被批量分配。