1

所以我正在为一个预先存在的 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' %>");

然后返回表单部分。

4

3 回答 3

1

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

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

看一下这个在 Angular 中的表单验证演示：

http://plnkr.co/edit/B3joUY

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

于 2012-11-19T14:23:14.567 回答
0

我发现有趣的注释：在模板（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 函数上？

于 2012-11-19T21:48:12.390 回答
0

答案如下：

     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。

于 2012-11-20T21:37:52.133 回答