带有客户端haml的angularjs答案

【问题标题】：angularjs with client side haml带有客户端haml的angularjs
【发布时间】：2012-12-02 00:09:22
【问题描述】：

我刚刚开始在我的 Rails 应用程序中使用 AngularJS，由于我习惯在 Rails 中使用 haml 模板，我想在客户端对 AngularJS 做同样的事情。问题是我不知道在 haml 文件中读取的位置。

我有一个投资者模型，我正在尝试将“展示”模板转换为 haml，因为它是最容易开始的。

这是我与 show 相关的 AngularJS 代码

investors.js.coffee

  # Setup the module & route
  angular.module("investor", ['investorService'])
    .config(['$routeProvider', ($provider) ->
      $provider
        .when('/investors/:investor_id', {templateUrl: '/investors/show.html', controller: 'InvestorCtrl'})
    ])
    .config(["$httpProvider", (provider) ->
      provider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
    ])

  angular.module('investorService', ['ngResource'])
    .factory('Investor', ($resource) ->
      return $resource('/investors/:investor_id.json', {}, {
        show: {method: 'GET'},
      })
    )

  angular.bootstrap document, ['investor']

这是我的控制器 AngularJS 代码

investors_controller.js.coffee

# Show Investor
window.InvestorCtrl = ($scope, $routeParams, Investor) ->
  html = haml.compileHaml({sourceId: 'simple'})
  $('#haml').html(html())

  investor_id = $routeParams.investor_id
  $scope.investor = Investor.show({investor_id: investor_id})

在后端我有一个 Rails JSON API。

这是它读取的 show.html 文件

<script type="text/haml-template" id="simple">
  %h1 {{investor.name}}
</script>

<div id="haml"></div>

<h1>{{investor.name}}</h1>

<p>
  <b>Total Cost</b>
  {{investor.total_cost}}
</p>

<p>
  <b>Total Value</b>
  {{investor.total_value}}
</p>

<a href='/investors/angular#/investors/{{investor.id}}/edit'>Edit</a>
<a href='/investors'>Back</a>

最终我想要一个 .haml 并将其传递给 templateURL 并获取 haml_coffee_assets 插件以在 AngularJS 开始查看动态字段并更改内容之前对其进行编译。

参考：https://github.com/netzpirat/haml_coffee_assets

目前这将转换haml并将其放入具有haml id的div中。但是 AngularJS 不会将 haml 代码中的 {{investor.name}} 更改为投资者的名字，因为它在操作中为时已晚。

如何在这样的 AngularJS 项目中正确实现客户端 haml 模板？

【问题讨论】：

为什么不用服务器端的haml渲染？像往常一样编写和提供您的 haml，让客户端应用程序请求转换后的 html。通过这种方式，您可以利用 haml 的过滤器，并且不会与 Angular 作斗争。否则，您将在客户端上解析 haml 模板后手动引导您的 Angular 应用程序。我还没有尝试过，但它可以工作。
那么，如果我要使用 haml 格式的 Rails 视图，我会在 templateUrl 中添加什么？

标签： javascript ruby-on-rails coffeescript angularjs haml

【解决方案1】：

您可以将所有 Haml 模板放在 assets/templates 文件夹中。然后你使用这个连接你的资产管道来为 Haml 服务：

Rails.application.assets.register_engine '.haml', Tilt::HamlTemplate

那么你的所有模板都可以从 /assets/(template name).html 获得

如果您希望能够在您的 Haml 模板中包含 rails 助手，您可以定义一个自定义模块并使用它来代替：

module CustomHamlEngine
  class HamlTemplate < Tilt::HamlTemplate
    def evaluate(scope, locals, &block)
      scope.class_eval do
        include Rails.application.routes.url_helpers
        include Rails.application.routes.mounted_helpers
        include ActionView::Helpers
      end

     super
    end
  end
end

Rails.application.assets.register_engine '.haml', CustomHamlEngine::HamlTemplate

这会将所有 rails 助手添加到模板的范围中。然后你可以将模板 url 传递给 angular，它会自动为你完成所有的工作！

【讨论】：

我正在尝试完成同样的事情（抱歉，我知道这是一篇旧帖子）。我正在使用 angular-rails-template 和 nghaml 扩展； haml 工作正常，但助手不是。我将您的 CustomHamlEngine 添加到 haml.rb 初始化程序，但仍然没有骰子。我在这里发布了细节：stackoverflow.com/questions/22976912/…

【解决方案2】：

我的方法是在资产编译时将服务器端的所有 haml 渲染到“application.js”文件中，使用 $templateCache。结帐http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading 以获取代码。

【讨论】：