ruby-on-rails-3 - 在 Rails 应用程序的 Haml 视图中使用 AngularJS

Question

我有一个带有 Haml 视图的 Rails 应用程序。现在我想将 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 应用程序中的少量功能。任何想法如何解决这个问题？

Answer 1

约翰，

我在这里编辑了你的代码：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();
}