How to define ruby code inside a haml file present in javascript folder

Question

For my project, I am using Ruby on Rails and Angular and I have a haml file present in /project_name/app/assets/javascript folder. I want to call a ruby class from the haml file but unfortunately I am not able to do that.

 .small-12.columns
    .booking-time
      %span.bold
        - if ABC::D.data(:hide_hours_field)  #ruby code 
          {{ item | timeformat }}
        - else
          {{ item | differentTimeFormat }}

Whenever I start the server, it's is showing it can't access the ruby class. I can easily access the ruby class in other haml files but not the one present in javascript folder. Can anyone help me here?

What does ABC::D actually look like? Not some instance variables, I hope? — Sergio Tulentsev
– Sergio Tulentsev, Commented Nov 18, 2016 at 17:47
I can access the same class from other haml files present in my project but not the one defined inside javascript folder. — python
– python, Commented Nov 18, 2016 at 17:49
you won't be able to do that, but I can't explain exactly why, at the moment. :/ In short, that is angular template, it should be managed by angular. — Sergio Tulentsev
– Sergio Tulentsev, Commented Nov 18, 2016 at 17:52

Sergio Tulentsev · Accepted Answer · 2016-11-18 18:10:37Z

1

Disclaimer: I'm bad at Angular (and didn't even touch version 2). What follows is not a best practice or anything.

So, you need to configure your angular view with some knowledge from ruby side. You can't conditionally render it and you can't call ruby from angular controllers (obviously). I suggest smuggling data via window object.

In an appropriate view in your application, put this JS snippet.

<script type='text/javascript'>
    window.jsEnv = {
      hide_hours_field: <%= ABC::D.data[:hide_hours_field] %> 
    }
</script>

Then you can reference that via $window object in angular

Controller

function MyController($window) {
  this.hideHours = function() {
    return !!$window.jsEnv.hide_hours_field;
  }
}

MyController.$inject = ['$window'];

angular.module('myApp').controller('MyController', MyController);

View

.small-12.columns(ng-controller='MyController as vm')
  .booking-time
    %span.bold(ng-if='vm.hideHours()')
      {{ item | timeformat }}
    %span.bold(ng-unless='vm.hideHours()')
      {{ item | differentTimeFormat }}

answered Nov 18, 2016 at 18:10

Sergio Tulentsev

231k43 gold badges381 silver badges373 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

python Over a year ago

what is myApp here angular.module('myApp').controller('MyController', MyController);

python Over a year ago

my editor is showing that ng-controller is not allowed on .small-12.columns(ng-controller='MyController as vm') any thoughts?

Sergio Tulentsev Over a year ago

@python: that was just an example. You surely have a controller used on that page elsewhere. Use that controller.

python Over a year ago

I found the file where I should add this code

<script type='text/javascript'>     window.jsEnv = {       hide_hours_field: <%= ABC::D.data[:hide_hours_field] %>      } </script>

but it's a haml file. Can I define this code in haml file ?

python Over a year ago

okay brother, it worked :D thank you so much for all the help.

|

Gennady Grishkovtsov · Accepted Answer · 2016-11-18 18:29:30Z

0

I suggest you use angular constant instead of window then you can use it as service:

    // index.html
    <script type="text/javascript">
      angular.module('myApp').constant('CURRENT_USER', #{current_user.to_json})
    </script>

    // controller
    function ApiConsoleController($scope, CURRENT_USER) {
      console.debug(CURRENT_USER)
    }

Also, you can try to use angular-rails-templates

    // application.rb
    config.angular_templates.ignore_prefix = %w(
      angular/components/
      angular/shared/
      angular/directives/
      angular/validators/
    )

answered Nov 18, 2016 at 18:29

Gennady Grishkovtsov

8189 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to define ruby code inside a haml file present in javascript folder

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related