如何將顯示在view中變數值傳給AngularJS

2014-11-01 11:59:58

AngularJS

Rails

title 如何將顯示在view中變數值傳給AngularJS

description 如何將顯示在view中變數值傳給AngularJS

datetime 2014-11-01 11:59:58

tags angularjs,rails

category coding

link pass-variables-from-server-to-angular-with-view

file 2014-11-01-115958-pass-variables-from-server-to-angular-with-view

template post

end

問題

在某些情況下，我們希望能將在view中使用的變數傳給AngularJS的變數來使用，舉個例子來說：

<form action="profile" method="put">
  <input type="text" name="name" value="<%= @profile.name%>" />
</form>

如果當@profile有值的時候，我們希望可以將@profile.name帶給input做為初始化的值。但用了ng-model之後，two-way binding的效果變成我們要將@profile.name的值帶到AngularJS中$scope.profile.name這個變數中。

<form action="profile" method="put">
  <input type="text" name="name" ng-model="profile.name" />
</form>

其實將變數從server傳給angular的方式很多，最標準的做法就是使用http API的方式讓angular去call，不過如果只是用在view中的變數，建API似乎有點太over了。另外原本render view就要一個requrest，使用API去取得變數又要另一個request，這樣就變成有點累贅。

解法

找了許多的做法之後，看起來還是使用module constant最乾淨。步驟如下：

1. 在rails controller中將@profile轉成json格式：

@profile = profile.to_json

2. 在rails view中加入javascript的程式碼，設定module constant：

<script type="text/javascript">angular.module("MyApp").constant("PROFILE_DATA", <%= @profile.html_safe %>)</script>

3. 在angular controller中使用module constant：

angular.module("MyApp").controller "ProfileEditCtrl", [
  '$scope', 'PROFILE_DATA'
  ($scope,   PROFILE_DATA) ->
  $scope.profile = PROFILE_DATA
]

Refs

問題
解法
Refs