1

だから私は既存のRailsアプリケーション用のAngularフロントエンドを書いています。$ qを使用することは、バックエンドを変換してREST ApiをJSONを介してngResourceに直接提供する前の中間ステップであることを理解していますが、残念ながら、さまざまな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はページに正しく表示されており、datepickerは正常にインスタンス化されています。返されたHAMLの最初の行は次のとおりです。

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

興味深い補足：HAML内の生のDOM要素にng属性を配置することは魅力のように機能します。例：

  = 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 など) に 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 属性を配置する方法を知っている人はいますか?

于 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 を挿入します。

次に、jQuery を返すのではなく、HAML を直接返します。

于 2012-11-20T21:37:52.133 に答える