如何使用AngularJS與Rails窗體？

我使用simple_form與AngularJS：如何使用AngularJS與Rails窗體？

= simple_form @post do |f| 
    = f.input :title, input_html: { "ng-model" => "title" }

它的偉大工程的我對新職位的情況，但對於編輯現有的崗位，它不綁定/從表單提交的標題在現有的價值填補。從我認爲Rails已經填入的值中，但AngularJS在頁面加載後擦除它，因爲$scope.title是空白的。

來源

2014-07-09 Samnang

我發現訣竅是實際創建一個帶有init函數的控制器，該函數採用所需的值。在我來說，我只是創建了一個app/assets/javascripts/angular_app.js文件看起來像這樣：

//= require_self 
AngularRails = angular.module('AngularRails', []); 
AngularRails.controller('PostFormCtrl', function($scope) { 
    $scope.init = function(title) { 
    $scope.title = title; 
    } 
});

你必須翻譯成視圖，但HAML它應該是這個樣子：

<div ng-app="AngularRails"> 
    <div ng-controller="PostFormCtrl" ng-init="init('<%= @post.title %>')"> 
    <%= form_for @post, html: {name: "postForm", "novalidate" => true} do |f| %> 
     <%= f.text_field :title, "ng-model" => "title", required: true %> 
     <%= f.submit "ng-disabled" => "postForm.$invalid" %> 
    <% end %> 
    </div> 
</div>

請記住，包括angular_app文件導入到application.js中，它應該是世界的。顯然，這不是一個非常強大的解決方案，但是您可以使用活動模型序列化程序將rails對象轉換爲json對象。然後，將該json對象傳遞給init函數並在控制器中迭代該json對象的鍵/值對，並將它們設置爲$ scope。類似這樣的：

AngularRails.controller('PostFormCtrl', function($scope) { 
    $scope.init = function(input) { 
    Object.keys(input).forEach(function(key) { 
     $scope[key] = input[key]; 
    }); 
    }; 
});

希望有所幫助！

來源

2014-10-15 19:51:23

如何使用AngularJS與Rails窗體？

回答

相關問題