6

AngularJS 1.0.0rc8 を使用して、Crud で簡単な連絡先管理アプリを構築しています。

現在存在する連絡先のリストを取得することは問題ありませんが、新しい連絡先をサーバーに保存しようとすると、新しい行が作成されます - 正しい 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 パーシャルで [保存] をクリックした後、オブジェクトがコンソールに記録されます。その内容を調べると、十分な値が収集されていることを確認できます。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'];

連絡先の不明なプロバイダーというエラーが表示されます。ここにエラーのスクリーンショットがあります

OK、メインの 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 に答える