与客户端HAML angularjs [英] angularjs with client side haml

问题描述

我刚刚开始使用AngularJS与我的Rails应用程序，当我已经习惯了使用Rails内部HAML模板，我愿做同样的在客户端AngularJS。问题是我不知道在哪里的HAML文件中读取。

I've just started using AngularJS with my Rails app and as I'm used to using haml templates within Rails I would like to do the same with AngularJS on the client side. Problem is I don't know where to read in the haml file.

我有一个投资模型，我想显示模板在转换成HAML，因为它是最容易下手。

I have a model for investors and I'm trying to convert the 'show' template over to haml as it's the easiest to start with.

下面是我AngularJS code与展示

Here is my AngularJS code relating to show

investors.js.coffee

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 code

Here is my controller AngularJS code

investors_controller.js.coffee

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。

In the backend I have a Rails JSON API.

下面是show.html文件，它在

Here is the show.html file it reads in

<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开始盯着场动态和不断变化的内容之前进行编译。

Ultimately I would like to have a .haml and pass this to the templateURL and get the haml_coffee_assets plugin to compile it before AngularJS starts looking at the dynamic fields and changing the content.

参考：<一href=\"https://github.com/netzpirat/haml_coffee_assets\">https://github.com/netzpirat/haml_coffee_assets

目前，这将转换HAML，放入股利与HAML的ID。然而，因为它是在操作太晚AngularJS不会在{{investor.name}}的HAML code内改变投资者的名称。

Currently this will convert the haml and put it into the div with id of haml. However AngularJS will not change the {{investor.name}} within the haml code to the investor's name as it's too late in the operation.

我如何正确地实现这样的一个AngularJS项目中的客户端HAML模板？

How do I properly implement client side haml templates within an AngularJS project like this?

推荐答案

您可以把所有的Haml的模板的资产/模板文件夹内。然后你挂钩的资产管道使用此服务Haml的：

You can put all of your Haml templates inside an assets/templates folder. Then you hook up your asset pipeline to serve Haml using this:

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

然后，所有的你的模板将可以从/资产/（模板名称）。html的

Then all of your templates will be available from /assets/(template name).html

如果您希望能够包括在您Haml的模板轨助手，你可以定义自定义模块，并使用它：

If you want to be able to include rails helpers within your Haml templates you can define a custom module and use that instead:

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

这将增加所有轨到助手的范围为你的模板。然后你就可以在模板中的URL角度通过，它将自动地做所有的专家组的工作适合你！

This will add all the rails helpers into the scope for your templates. Then you can pass in template urls to angular and it will automagically do all the leg work for you!

这篇关于与客户端HAML angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！