web-dev-qa-db-ja.com

Rails appのHamlビュー内でAngularJSを使用する

Rails Hamlビューを備えたアプリがあります。アプリケーションの一部にAngularJSを追加したいのですが、問題は、Hamlビューがサーバー側でレンダリングされ、AngularJSコードがレンダリングされないことです。クライアント側でレンダリングされるため、機能します。

Index.html.hamlにこれだけがあるとしましょう：

!!!
%html{"ng-app" => "Test"}
  %head
    %script{:src => "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"}
    :javascript
      function Clock($scope) {
        $scope.currentTime = new Date();
      }
    %title Welcome to AngularJS
  %body
    %h1 Hello, World.
    %p{"ng-controller" => "Clock"}
      The current time is {{currentTime | date:'h:mm:ss a'}}.

したがって、現在は、実際に処理せずに、中括弧内のすべてを印刷しているだけです。解決策はありますが、完全なビューがAngularJSテンプレートに置き換えられる状況向けです。 AngularJSを主に私のRailsアプリの小さな機能に使用したい。これを解決する方法はありますか？

ruby-on-rails-3angularjshaml
21
John

ジョン、

ここでコードを少し編集しました： http://codepen.io/anon/pen/vKiwH

%html{"ng-app"=>true}
 %p{"ng-controller" => "clock"}
  The current time is {{currentTime | date:'h:mm:ss a'}}.

そしてjavascriptは：

function clock($scope) {
  $scope.currentTime = new Date().getTime();
}
23
Leon