As I work on developing an Angular Frontend for an existing Rails Application, I have come across the challenge of integrating $q in my current setup. While I understand that transitioning to a REST API served directly to ngResource would be ideal, the complexity of the Ruby logic dispersed throughout the application makes this transition a daunting task at the moment.
My main concern lies in correctly handling ng attributes within the returned partials. The code snippet below illustrates the structure:
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']
The HAML content is being rendered correctly on the page and the datepicker functionality is working as intended. A key point in the HAML code is:
= form_for @type, :html=>{:class=>'form-horizontal type-form', :"ng-submit"=>"validateForm($event);"} do |f|
Interestingly, applying ng-attributes directly to raw DOM elements within HAML functions smoothly. For instance:
= form_for @type, :html=>{:class=>'form-horizontal type-form', :"ng-controller"=>"someFormController"} do |f|
The above method fails while the below approach succeeds:
= form_for @type, :html=>{:class=>'form-horizontal type-form', :"ng-controller"=>"someFormController"} do |f|
%div(ng-controller=someFormController)
The service responsible for displaying functions as follows:
Company.MyModule.factory 'TypeJQuery', ($q, $rootScope) ->
multipart: (element) ->
deferred = $q.defer()
$.get "..." + element, (data) ->
$rootScope.$apply ->
deferred.resolve data
deferred.promise
Despite these efforts, the submit action does not trigger and no logs are recorded. An alternative attempt made was:
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'))")
Unfortunately, these changes did not yield any significant results.
I am seeking suggestions on how to tackle this issue effectively. Additionally, it's worth noting that further down in the returned partial there is another element with an ng-controller attribute that doesn't seem to respond as expected.
EDIT: The HAML content isn't directly returned but instead routed through the following js.erb file:
$('div.form_<%= @artifact.id %>').replaceWith("<%=j render 'form' %>");
This process then delivers the form partial.