Databases
StackOverflow2013
Postsdbo
PODisplaying ng-attributes in rails haml partials returned via jquery ajax through $q
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODisplaying ng-attributes in rails haml partials returned via jquery ajax through $q
    text
    copied!<p>So I am writing an Angular Frontend for a pre-existing Rails Application. I understand that using $q is at best an intermediate step before converting the back end to serve a REST Api directly to ngResource through JSON, but unfortunately for the time being there is too much logic residing in various Ruby locations to easily rewrite everything into a purely Angular format.</p> <p>The question is, how do I correctly instantiate and handle ng attributes in the returned partials. The below is a sanitized version of the code.</p> <pre><code> Company.Controller.TypeAccordionController = (scope, http, element, q, typeJQueryService) -&gt; scope.validateForm = (event) -&gt; console.log "we are here" scope.getTheDamnType = (id) -&gt; typeJQueryService.multipart(id).then (response)-&gt; angular.element('.datePicker').datepicker() Company.Controller.TypeAccordionController.$inject = ['$scope', '$http', '$element', '$q','typeJQuery'] </code></pre> <p>The returned HAML is being correctly displayed on the page and the datepicker is being instantiated successfully. The first line of the returned HAML is:</p> <pre><code> = form_for @type, :html=&gt;{:class=&gt;'form-horizontal type-form', :"ng-submit"=&gt;"validateForm($event);"} do |f| </code></pre> <p>Interesting Sidenote: Putting ng-attributes on raw DOM elements within the HAML works like a charm. Example:</p> <pre><code> = form_for @type, :html=&gt;{:class=&gt;'form-horizontal type-form', :"ng-controller"=&gt;"someFormController"} do |f| </code></pre> <p>The above WILL NOT WORK. The below works like a charm however:</p> <pre><code> = form_for @type, :html=&gt;{:class=&gt;'form-horizontal type-form', :"ng-controller"=&gt;"someFormController"} do |f| %div(ng-controller=someFormController) </code></pre> <p>The service doing the displaying works as follows:</p> <pre><code> Company.MyModule.factory 'TypeJQuery', ($q, $rootScope) -&gt; multipart: (element) -&gt; deferred = $q.defer() $.get "..." + element, (data) -&gt; $rootScope.$apply -&gt; deferred.resolve data deferred.promise </code></pre> <p>However, nothing happens on submit, the log doesn't print. An alternative attempt was:</p> <pre><code> scope.validateForm = (event) -&gt; console.log "we are here" scope.getTheDamnType = (id) -&gt; typeJQueryService.multipart(id).then (response)-&gt; angular.element('.datePicker').datepicker() angular.element('form').attr("ng-submit", "validateForm($(this).attr('id'))") </code></pre> <p>Similiarly nothing useful happened.</p> <p>Any suggestions on how I can get this fixed? On a side note: later in the returned partial there is another element with an ng-controller on it. Needless to say useful things do not happen to it.</p> <p>EDIT: The HAML isn't actually being returned raw, rather it is routed through the following js.erb:</p> <pre><code> $('div.form_&lt;%= @artifact.id %&gt;').replaceWith("&lt;%=j render 'form' %&gt;"); </code></pre> <p>Which then returns the form partial.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload