0

我开始在 Rails 应用程序上使用 AngularJs。我想知道如何管理 rails 和 angularjs 之间的通信。我想用 rails 生成模板，然后 angularjs 将执行控制器来更新视图：

.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()"}

问题是我的视觉效果很差。它首先向我显示：

角度执行前的应用程序控制器

然后它将更改为：

使用 angularjs 的应用程序

它有效，但我有视觉效果。我该如何管理。如何使用 AngularJs 创建可重用的模块？

4

1 回答 1

0

我不熟悉 Rails 或其模板引擎，但我知道要让 angularjs 在加载时将这些模板变量隐藏在原始状态，您可以尝试两件事：

  1. 尝试将ng-cloak属性添加到封闭元素（tr在这种情况下）并放入display: none !important;您的 CSS。

  2. 对于非 CSS 解决方案，请尝试使用ngBindandngBindTemplate而不是将模板变量包装在大括号中。

例如：

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

对于您的示例，我将对 Rails 模板表单进行大胆的猜测：

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

有关更多信息，请参阅ng-bind 上的 AngularJS 文档。

于 2013-08-01T13:56:03.260 回答