6

我正在使用 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 部分上单击“保存”后，如果我检查它的内容，对象会记录到控制台，然后肯定会收集到值 - 请注意 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 = "";
            })
        }
4

2 回答 2

7

使用联系人服务可以更好地实现这一点。请在 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;
});

更改控制器中的 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>需要用逗号分隔的字符串列表替换，该列表表示您的应用程序所需的任何模块。
于 2012-05-14T11:39:26.500 回答
1

检查attr_accessible你的模型。使用新的 3.2.3 导轨，所有模型属性默认都受到保护，不会被批量分配。

于 2012-05-11T21:28:25.823 回答