在 Rails 应用程序的 Haml 视图中使用 AngularJS

2024-02-21

我有一个带有 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 应用程序中的少量功能。有什么想法如何解决这个问题吗?


John,

我在这里编辑了你的代码:http://codepen.io/anon/pen/vKiwH 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();
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Rails 应用程序的 Haml 视图中使用 AngularJS 的相关文章

随机推荐