AngularJS - 带有Rails 3.2.3的$ http POST

Question

我正在使用AngularJS 1.0.0rc8使用Crud构建一个简单的Contact Management应用程序.

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

这是一个截图,显示我的意思:

如您所见,数字4和5被赋予了Id,但first_name,last_name和phone_num未保存到数据库中.

我在Controller中使用$ 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 partial上的"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从RestKit POST显示"警告:无法验证CSRF令牌真实性"

现在我回到原来的问题.调用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> 需要替换为逗号分隔的字符串列表,表示应用程序所需的任何模块.