在通过 jquery ajax 通过 $q 返回的 rails haml partials 中显示 ng-attributes答案

【问题标题】：Displaying ng-attributes in rails haml partials returned via jquery ajax through $q在通过 jquery ajax 通过 $q 返回的 rails haml partials 中显示 ng-attributes
【发布时间】：2012-11-03 13:40:01
【问题描述】：

所以我正在为一个预先存在的 Rails 应用程序编写一个 Angular 前端。我知道在将后端转换为通过 JSON 将 REST Api 直接提供给 ngResource 之前，使用 $q 充其量只是一个中间步骤，但不幸的是，目前在各种 Ruby 位置中存在太多逻辑，无法轻松地将所有内容重写为纯 Angular 格式。

问题是，我如何正确实例化和处理返回的部分中的 ng 属性。以下是经过净化的代码版本。

 Company.Controller.TypeAccordionController = (scope, http, element, q, typeJQueryService) ->

   scope.validateForm = (event) ->
     console.log "we are here"

   scope.getTheDamnType = (id) ->
     typeJQueryService.multipart(id).then (response)->
       angular.element('.datePicker').datepicker()


  Company.Controller.TypeAccordionController.$inject = ['$scope', '$http', '$element', '$q','typeJQuery']

返回的 HAML 正在页面上正确显示，并且日期选择器正在成功实例化。返回的 HAML 的第一行是：

 = form_for @type, :html=>{:class=>'form-horizontal type-form', :"ng-submit"=>"validateForm($event);"} do |f|

有趣的旁注：将 ng-attributes 放在 HAML 中的原始 DOM 元素上就像一个魅力。示例：

  = form_for @type, :html=>{:class=>'form-horizontal type-form', :"ng-controller"=>"someFormController"} do |f|

以上将不起作用。然而，下面的工作就像一个魅力：

  = form_for @type, :html=>{:class=>'form-horizontal type-form', :"ng-controller"=>"someFormController"} do |f|
      %div(ng-controller=someFormController)

显示的服务工作如下：

 Company.MyModule.factory 'TypeJQuery', ($q, $rootScope) ->
   multipart: (element) ->
     deferred = $q.defer()
     $.get "..." + element, (data) ->
       $rootScope.$apply ->
         deferred.resolve data
     deferred.promise

但是，提交时没有任何反应，日志不会打印。另一种尝试是：

   scope.validateForm = (event) ->
     console.log "we are here"

   scope.getTheDamnType = (id) ->
     typeJQueryService.multipart(id).then (response)->
       angular.element('.datePicker').datepicker()
       angular.element('form').attr("ng-submit", "validateForm($(this).attr('id'))")

同样没有发生任何有用的事情。

关于如何解决这个问题有什么建议吗？附带说明：稍后在返回的部分中有另一个元素，上面有一个 ng-controller。不用说有用的事情不会发生在它身上。

编辑：HAML 实际上并没有被原始返回，而是通过以下 js.erb 路由：

 $('div.form_<%= @artifact.id %>').replaceWith("<%=j render 'form' %>");

然后返回表单部分。

【问题讨论】：

我知道它不是很有帮助，但它看起来不太适合 AngularJS，如果您需要在控制器中操作 DOM，那么无论如何使用 Angular 不会有很多好处。如果你继续使用 angular：你不需要使用 jQuery ajax，你可以使用 $http 服务
我知道这一点，这是长期目标，这应该是一种中间步骤，这样我们就不必一次性重写整个现有的 Rails 应用程序。不过还是谢谢。

标签： jquery ajax coffeescript haml angularjs

【解决方案1】：

我需要查看您正在输出的 HTML 的其余部分，但我马上可以告诉您，您的验证似乎是错误的。

Angular 中的验证通常由指令完成。如果一个表单是 $invalid 它永远不会点击 ng-submit，因此你的验证函数永远不会被调用。 ng-submit 应该是你想要调用的任何函数如果你的表单是有效的。

看看这个在 Angular 中进行表单验证的演示：

http://plnkr.co/edit/B3joUY

如果您需要一些自定义验证，这也是可行的，它只需要一个自定义验证指令。但这是一个完全不同的问题。

【讨论】：

感谢您通过您对 ng-submit 以及 Angular 如何进行表单验证（获胜的 ngModule）的解释，引导我走上一条相当有趣的谷歌路径。
我找到了解决方案。由于您的帖子，我学到了一些相当有趣的东西，因此我将给您赏金。

【解决方案2】：

我发现有趣的注释：在模板（haml、erb 等）中的 rails 函数上设置 ng-attributes 似乎不起作用，而直接在该部分内的 DOM 元素上设置它是一种享受。示例：

 = form_for @type, :html=>{:class=>'form-horizontal type-form', :"ng-controller"=>"someFormController"} do |f|

上面的方法不起作用，它会默默地失败，DOM 检查会在表单元素上显示控制器，它只是不起作用。然而，以下内容：

 = form_for @type, :html=>{:class=>'form-horizontal type-form'} do |f|
       %div(ng-controller=someFormController)

有人知道为什么会这样/如何绕过这个限制并将 ng 属性直接放在 rails 函数上吗？

【讨论】：

老实说，自从我开始使用 Angular 以来，我只使用过 HTML 文件。我的服务器唯一写出的是直接的 JSON。我不再需要它来呈现我的 HTML，我让 Angular 在客户端处理它。
是的，我知道，这是一个长期战略。不幸的是，由于截止日期、功能蔓延等原因，需要逐步迁移大量预先存在的代码

【解决方案3】：

答案如下：

     typeJQueryService.multipart(id).then (response)->
          scope.form = compile(response.substring(response.indexOf("<form"), response.lastIndexOf("</form>")))(scope)
          angular.element("div.form_" + id).parent().html compile(scope.form)(scope)

显然先将 $compile 作为 compile 注入到控制器中。

然后，直接返回 HAML，而不是返回 jQuery。

【讨论】：