How to manage views with AngularJs and Rails

Question

I am starting to use AngularJs on a rails app. And I wanted to know how to manage communication between rails and angularjs. I wanted to generate templates with rails and then angularjs will execute controllers to update view :

.span6.box.applications{ "ng-controller" => "ApplicationListCtrl"}
      .padding5.clearfix
        .clearfix
          %h2.inline.pull-left.no-border= t('home.titles.applications')
        .content.top5
          - if @applications.count > 0
            %table.table.table-striped
              %thead
                %tr
                  %th= Application.human_attribute_name(:id)
                  %th= Application.human_attribute_name(:name)
                  %th

              %tbody
                %tr{ "ng-repeat" => "application in applications" }
                  / %div{ "ng-include" => "", "src" => "'/applications/new.html'" }
                  %td {{application.name}}
                  %td {{application.name}}
                  %td{ width: "50px"}
                    .pull-right
                      - if can? :edit, Application
                        %span.fui-gear{"data-toggle" => "tooltip", :title => t('form.settings'), "ng-click" => "edit()" }

                      - if can? :read, Application
                        %span.fui-search.left10{"data-toggle" => "tooltip", :title => t('form.show'), "ng-click" => "show()"}

The problem is that I have a bad visual effect. It first displays me this :

Application controller before angular execution

then it will change it for :

Applications with angularjs

It works but I have the visual effect. How can I manage that. How can I create module reusable with AngularJs ?

possible duplicate of [Prevent double curly brace notation from displaying momentarily before angular.js compiles/interpolates document](http://stackoverflow.com/questions/12866447/prevent-double-curly-brace-notation-from-displaying-momentarily-before-angular-j) — Brian Glick, Apr 26 '14 at 18:44

score 0 · Answer 1 · answered Aug 01 '13 at 13:56

I'm not familiar with Rails or its template engine, but I do know that for angularjs to hide those template variables in their raw state while loading, you can try two things:

Try adding the ng-cloak attribute to the enclosing element (tr in this case) AND put display: none !important; in your CSS.
For a non-CSS solution, try using ngBind and ngBindTemplate instead of wrapping your template variables in curly brackets.

For example:

    <td ng-bind="application.name"></td>

I'll take a wild guess at the Rails template form for your example:

    %td{ "ng-bind" => application.name }

For more info, see the AngularJS documentation on ng-bind.

How to manage views with AngularJs and Rails

1 Answers1