Search code examples
angularjssalesforcevisualforce

VisualForce page with AngularJS tag


I've got an interesting question.

I have a VisualForce page with some Angular JS.

The problem is with the ng-repeat-end tag.

The HTML looks like this:

<span ng-repeat-end ng-if="$last" class="a nav__links__link" data-nav="control">You are here: {{breadcrumb.label}}</span>

VisualForce won't save with this error:

Attribute name "ng-repeat-end" associated with an element type "span" must be followed by the ' = ' character.

So I change the offending tag to this:

<span ng-repeat-end="" ng-if="$last" class="a nav__links__link" data-nav="control">You are here: {{breadcrumb.label}}</span>

Which makes VisualForce happy but Angular JS mad with this error:

Unterminated attribute, found 'ng-repeat-start' but no matching 'ng-repeat-end' found.

How can I satisfy both VisualForce's parser and AngularJS?


Solution

  • At the end of the day Visualforce needs a valid XML document. Try searching for "Angular + XHTML" I guess? I've found https://groups.google.com/forum/#!topic/angular/8iorDWKsMyI for example.

    Will ng-repeat-end="ng-repeat-end" work? I remember that a trick with attr. name as attr. value is what's a perfectly fine workaround to convert for example <input type="checkbox" checked /> into valid XHTML.

    SF themselves didn't include an example similar to what you're trying to do and I'm not familiar with AngularJS... It might be that they promote it but only for hybrid apps (where you could have local HTML file without the restrictions) or apps where you'd build your DOM from javascript, without having any skeleton in VF other than <script>s and <body>.

    Last but not least - check what you can salvage from:

    Maybe contact the developers? All examples I can find seem to just "repeat" by creating a <table>, no <span>s...