与客户端haml的angularjs

Question

我刚刚开始在我的Rails应用程序中使用AngularJS,因为我习惯在Rails中使用haml模板,我想在客户端使用AngularJS.问题是我不知道在haml文件中的哪个位置读取.

我有一个投资者的模型,我正在尝试将'show'模板转换为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并将其放入id为haml的div中.然而,AngularJS不会将haml代码中的{{investor.name}}更改为投资者的名字,因为它在操作中为时已晚.

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

Answer 1

您可以将所有Haml模板放在assets/templates文件夹中.然后,您使用以下方法连接资产管道以服务Haml:

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

然后,所有模板都可以从/ assets /(模板名称).html获得

如果您希望能够在Haml模板中包含rails helper,您可以定义一个自定义模块并使用它:

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传递给角度,它将自动为你完成所有腿部工作!