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

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

这是一个截图来说明我的意思:

如您所见，数字 4 和 5 已获得 ID，但 first_name、last_name 和 phone_num 未保存到数据库中。

我在处理对象的 Controller 中使用 $scope.addContact 函数。

这里是联系人列表 Controller 的完整代码:

'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 部分点击'保存' 后，对象被记录到控制台，如果我检查它的内容，肯定会收集值 - 注意 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 的帮助下，这是我更新后的整个 Controller 代码:

 // 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 token 的真实性

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

现在我回到了最初的问题。当调用创建方法时，一个新行被保存到数据库中，但模型数据没有。

太棒了...终于让这个东西工作了。

问题是 $scope.addContact 函数。它使用输入的“名称”，而不是模板中名为“newFirstName”和“newLastName”的 ng-model 绑定(bind)。

更新后的函数如下所示:

$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 = "";
            })
        }

最佳答案

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

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;
});

更改 Controller 中的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>需要替换为以逗号分隔的字符串列表，表示您的应用程序所需的任何模块。

关于javascript - AngularJS - $http POST 与 Rails 3.2.3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10557921/