Databases
StackOverflow2013
Postsdbo
POAngular interpolation is altering parent form element, how can I overwrite this function so that ONLY the expression at the text node is evaluated?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngular interpolation is altering parent form element, how can I overwrite this function so that ONLY the expression at the text node is evaluated?
    primarykey
    data
    text
    <p>I'm working on an eCommerce site and using angular to build a widget on product detail pages. I have very limited control over what is initially rendered as HTML for the browser. Most of what needs to be done with my widget is working as expected. I have a side effect of Angular's expression interpolation affecting the <code>add to cart</code> form. Each of a product's color variations will render to the page as as <code>HTMLOptionElement</code> with an <code>innerText</code> value like one of the following:</p> <p><code>{{hex="000000";sizes=["S","M","L","XL","2XL"];name="Black";}}</code> or<br> <code>{{hex="FFFFFF";sizes=["S","M","L"];name="White";}}</code> or<br> <code>{{hex="323C88";sizes=["S","M","L","XL","2XL"];name="Royal";}}</code></p> <p>The end result of the Angular initialization process is that each of these is transformed into the following:</p> <p><code>Black</code> or<br><code>White</code> or<br><code>Royal</code> respectively<br> </p> <p>This is fine, as this allows the user a readable value for his color selection. The side effect is that the parent <code>HTMLFormElement</code> no longer submits via the submit button. Its class attribute has been changed to include <code>ng-pristine</code> and <code>ng-valid</code>. </p> <p><strong>Please note I cannot change the HTML of this form until after the page loads.</strong></p> <p>I'm sure I could hack together a simple override to get the form to submit, but I'm looking more for information about plugging into angular's initialization. The best I've been able to come up with so far is to wrap the form with <code>ng-non-bindable</code> in the java template:</p> <pre><code>&lt;div ng-non-bindable&gt;${MyAddToCartFormRendersHere}&lt;/div&gt; </code></pre> <p>But then I'd need a way to do the <code>$interpolate</code> call myself after the page had loaded.</p> <p><strong>This works but I'll bet there is a better way.</strong></p> <pre><code>AngularApp.directive("customInterpolation", function ($interpolate, $document) { $document.find("option:contains('{{')").each(function(i,el){ var angEl = angular.element(el); angEl.text($interpolate(angEl.text(),true)); }); </code></pre> <p>and then the form wrapper becomes:</p> <pre><code>&lt;div ng-non-bindable data-custom-interpolation&gt;${MyAddToCartFormRendersHere}&lt;/div&gt; </code></pre> <p>My directive will run once, but returning anything (e.g. a link function) is useless because of the nonBindable directive. ... there has to be a better way.</p> <p>Here is a <a href="http://jsfiddle.net/kWecG/3/" rel="nofollow">jsfiddle</a> to better illustrate the issue. Note, the form won't submit unless the <code>ngNonBindable</code> directive is applied to the surrounding <code>&lt;div&gt;</code>.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USbodine
    1. USbodine
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. CO`<div class="ng-non-bindable">` surely?
      singulars
      1. POAngular interpolation is altering parent form element, how can I overwrite this function so that ONLY the expression at the text node is evaluated?
      1. USDonal Fellows
    2. COI didn't really follow all of that. How about a Plunker or jsFiddle?
      singulars
      1. POAngular interpolation is altering parent form element, how can I overwrite this function so that ONLY the expression at the text node is evaluated?
      1. USJosh David Miller
    3. COWhy would changing the class causing the form not to submit anymore?
      singulars
      1. POAngular interpolation is altering parent form element, how can I overwrite this function so that ONLY the expression at the text node is evaluated?
      1. USasgoth
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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