在rails中顯示ng屬性haml partials通過$ q通過jquery ajax返回

所以我正在爲一個預先存在的Rails應用程序編寫一個Angular Frontend。我知道使用$ q充其量只是在將後端通過JSON直接提供給ngResource以將REST Api提供給ngResource之前的一箇中間步驟，但不幸的是，暫時存在太多邏輯駐留在各個Ruby位置以輕鬆地將所有內容都重寫爲純粹的Angular格式。

問題是，我如何正確實例化和處理返回的部分中的屬性。以下是代碼的消毒版本。

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'))")

Similiarly任何有用的事。

有關我如何解決這個問題的任何建議？在附註中：稍後在返回的部分中，有另一個元素帶有ng控制器。不用說有用的東西不會發生在它身上。

編輯：實際上沒有返回的HAML生，而是通過以下js.erb路由：

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

然後返回的形式部分。

來源

2012-11-14 Abraham P

我知道這並不真正有幫助，但它看起來並不適合AngularJS，如果您需要在控制器中操作DOM，您將無法從Angular中獲益。如果你繼續使用angular：你不需要使用jQuery ajax，hou可以使用$ http服務 – Guillaume86

我意識到這一點，這是一個長期目標，這應該是一個排序中間步驟，這樣我們不必一次性重寫我們整個先前存在的Rails應用程序。雖然謝謝。 –

我需要看看你輸出的HTML的其餘部分，但馬上就可以告訴你，看起來你正在做錯誤的驗證。

Angular中的驗證通常由指令完成。如果一個表單是$無效的，它永遠不會命中ng-submit，因此你的驗證功能從來不會被調用。 ng-submit應該適用於你想要的所有功能，如果你的表單有效，就叫做。

看一看這個表單驗證的角度演示：

http://plnkr.co/edit/B3joUY

如果你需要一些自定義的驗證，這是可行的，它只需要一個自定義的驗證指令。但這是一個完全不同的問題。

來源

2012-11-19 14:23:14

非常感謝您通過您對ng-submit的解釋以及Angular如何進行表單驗證（ngModule for the win）來引導我一個相當有趣的Google路徑。 –

我找到了解決方案。由於你的帖子，我學到了一些相當有趣的東西，我會給你賞金。 –

值得注意的一點是，我發現：在模板中軌功能（HAML，ERB，等等）似乎不工作環境NG-屬性，而直接將其設置內的部分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)

任何人都知道這是爲什麼/如何繞過這個限制，並把直接納克屬性在鐵軌上的功能？

來源

2012-11-19 21:48:12

老實說，自從我開始使用Angular以來，我只使用過HTML文件。我的服務器寫出來的唯一東西是直JSON。我不需要它來渲染我的HTML，我讓Angular在客戶端處理這個問題。 –

是的，我知道，這是一個長期戰略。不幸的是，由於截止日期，功能蠕變等原因，需要在嬰兒步驟中遷移相當多的預先生成的代碼。 –

的答案如下：

 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)

顯然注入$編譯成控制器首先編譯。

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

來源

2012-11-20 21:37:52

在rails中顯示ng屬性haml partials通過$ q通過jquery ajax返回

回答

相關問題