在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模板所取代的情況。我想在我的Rails應用程序中主要使用AngularJS來實現小功能。任何想法如何解決這個問題？

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(); 
}