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?
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:
the "Mobile Pack": (looks like it's only VF sample in that directory),
http://www.oyecode.com/2013/06/getting-started-with-angularjs-on.html
Maybe contact the developers? All examples I can find seem to just "repeat" by creating a <table>, no <span>s...
Related
NOTE: My question is identical to the unanswered question: Angular schema SEO.
My question is more of a search engine question than an angular question.
Basically this question asks: do search engine bots hang around your webpage for a second or two while some client-side js library (such as angular) re-constructs the dom and then read the completed dom, as angular does during the compile phases when handling ng-repeat directives.
<div itemscope
itemtype = "http://schema.org/Movie"
>
<span ng-repeat = "movie in movies"
itemprop = "name"
>
{{movie}}
</span>
</div>
So will google bot ever read every itemprop=name for every movie generated by this ng-repeat?
I have found schema validator which, for my site (which is unrelated to the example html above), actually still shows the angular expressions:
...
datePublished {{lvl_project['year']}}
name "{{lvl_project['title']}}"
keywords {{lvl_project['tools'].join(',')}}
...
Furthermore, it did not show the ng-repeat-generated elements.
This seems to me like a strong indicator that the google-bot did not see the angular-generated elements and their values, but there could be more to the issue that I don't know.
I was doing code review and found custom directive with html tags inside attribute:
<form-field help="Use <b>foo</b> option to blah blah"></form-field>
I find it very unusual, and thought that it will not work in older browsers. But when I and author of this code checked - it turned out that it works in every version of IE we had (10+) and in Chrome/FF without any troubles.
Moreover I checked it in W3C validator (validator.w3.org) and it looks like HTML allows to have unescaped tags inside attributes. This SO answers Can data-* attribute contain HTML tags? confirms that too.
So my question is: Can this make troubles when used with AngularJS? Will this behavior change in Angular 2.0? And finally is this accepted usage of attributes?
I personally would like something like this:
<form-field>
<help>
Use <b>foo</b> option to blah blah
</help>
</form-fild>
Yes, you can do that with ng-bind-html directive. Take a look at this: https://docs.angularjs.org/api/ng/directive/ngBindHtml
I have created a jsp page having a spring form. I want to validate the form using angular js. When I try to add required and ng-model attributes inside <form:input> tag, I'm getting exception Jasper exception equal symbol expected and Attribute ng-model invalid for tag input according to TLD in the line where i added these attributes.
What is the procedure to make my logic work?
There are 4 things you can try:
First one: Probably the neatest, and I think this should work:
<form:input path="usrname" maxlength="12" required="required"/>
So required='required' instead of just required
Second one: Forget about Angular Validation, and use Spring Validation methods. Maybe this isn't the thing you're searching for.
Third one: Isn't it possible for you to forget about <form:input> tags, and use <input> tags instead? Maybe not.
Fourth one: You can try to give your form:input tag an id, and at the bottom of your page, run a simple jQuery script. I know, this isn't the neatest thing to do, but maybe it works.
<html>
<body>
<form:input path="someinput" id="someinput"/>
</body>
<script>
$("#someinput").attr('required', '');
</script>
</html>
Please mark this as an answer if this helped you.
I am using ngBindHtml to display some HTML from an (internal) CMS:
<span ng-bind-html="cmsHtml"></span>
The HTML contains a link with an id attribute:
"<a id='fsgPdfLink' href='http://blah/download.pdf' target='_blank'>Click here to download the PDF</a>"
However, I notice that the id attribute is removed by angular before writing the link to the page, so what gets rendered is just:
<a href='http://blah/download.pdf' target='_blank'>Click here to download the PDF</a>
Looking at the source for the ngSanitize module, it seems that for some reason the id attribute is not on the list of valid attributes:
https://github.com/angular/angular.js/blob/master/src/ngSanitize/sanitize.js#L206
What's the reason for not allowing the id attribute? Is it a security risk?
I'd really like to continue to use ngBindHtml if possible. Is there an API where I can add safe tags to the sanitizer's list? Or do I have to edit the source myself to add this tag?
To partially answer my own question, there doesn't seem to be an API to change the built-in whitelist, as described in this open issue:
https://github.com/angular/angular.js/issues/5900
I am trying to use angular together with an JSF backend.
I have the problem that custom directives are not processed within JSF when set as attributes for example:
<div my-directive .... > ...(some code)... </div>
JSF or XHTML sais that is not allowed to use attributes withtout being assigned (with an =).
To workaround, I used
<div my-directive ="" ...> ...(some code)... </div>
That would be fine with angularFS but when using the attribute
"my-directive" it will be removed after JSF rendering completely. The problem is my html relies on JSF ajax calls to a DB that I need as the backend relies on JSF 2.2/JSP.
The only thing I can bring it to work is using a tag/an element like
<my-directive> ... </my-directive>
Doing so is somewhat undesireable as I would like to use an attribute.
I learnt that JSF can be tricky if used with angularFS.
Did someone have this issue before?
If I understood your question correctly, JSF2.2 does what you need. It allows either to go with pure Html5 and bind with JSF or go with JSF and use p:passthrough.
#see a few links below
Link 1, Link 2, Link 3