I defined the name of some fields in my translation file and now I want to add some validation messages. This would be my translation file i.e:
{
"field-name": "Name",
"field-email": "Email",
"required": "The field {{field}} is mandatory"
}
Is there any way to tell angular translate to cross-reference and pass as parameter the key of another translation? Something like:
<span translate translate-values="{field: 'field-name'}">
required
</span>
or
<span translate translate-values="{field: 'field-email'}">
required
</span>
I searched the docs and googled it but got no results.
If this is not possible, what would be the less bloated way to implement it? Take into account this is for a SPA (Single Page App) and the user can change the language without reloading the page.
I managed to deal with it using $translateProvider.postProcess().
It even works with translate-values, and nested translate-values parameters (with some care not to have two parameters with the same name)
Check it here: https://codepen.io/Onnizuka/pen/ePwKMK
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'm developing a friend invitation feature for a website.
Only requirements are : by email and has a max number of invitations at a time.
My idea is the following :
At the start, user only sees one email field. When he enters an email adress in the only field, angularjs validates it (email format check) and creates an additional email field.
Now, I come from a jquery background and I think it's bad practice to manipulate DOM with angular.
How would one do it with angularjs ?
Is it a good idea to create a factory that "produces" (from a template file) fields ?
Can a library like bootstrap ui help me write simpler code for form validation and error management
This Plunker might fulfill your need at its closest: http://plnkr.co/edit/5qRXQ1XGzUnhYjLCiyYR?p=preview
The key point in this technique is letting the user directly edit a dynamic list of models. Indeed in the example, $scope.invites contains your values. The trick here is referring to them as models:
<input type="email" class="invite" name="invite{{ $index }}" ng-model="invites[$index].mail" ng-change="checkInvite($index)" />
$index being the index of the current ng-repeat iteration. checkInvite function will take care of watching changes in your invites fields.
Notes:
invites is an array of objects, this way we're sure not to mess with ng-repeat, iterating over the reference that we handle (vs models that would be handled by angular)
The field's name is useful to manually check the field's validity: in the controller we can check a field's validity accessing $scope.formName.fieldName.$valid
I also added an extra test that checks if the user clears a non-last filled-in field. In this case, we remove the field.
Have fun using angular!
Personally, I would find the design confusing, since I wouldn't know I could have more email addresses. At the minimum, I would want a + to indicate to the user that s/he can add more addresses. Think of how airlines do "multiple destinations" searches on their Websites.
However, if you are set at this, use an array in the scope. I am using a table for this, but anything will do.
<input ng-model="newemailaddress"></input><button ng-click="addEmail">Add</button>
<table>
<tr ng-repeat="addr in addresses"><td>{{addr}}</td></tr>
</table>
And your controller something like:
.controller('MyCtrl',function($scope) {
$scope.addresses = [];;
$scope.newemailaddress = "";
$scope.addEmail = function() {
// do validation
if (valid) {
$scope.addresses.push($scope.newemailaddress);
$scope.newemailaddress = "";
};
};
})
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...
I'm trying to work out why this doesn't work:
<a class="ng-click: loadSomeDatas();">Click here to load some datas</a>
But this does:
<a ng-click="loadSomeDatas()">Click here to load some datas</a>
Why are you using classes?
Well ng-* attributes don't play nice on some of the clients I have to support, thus rather than shimming them I'd rather just use good ol' safe classes.
This looks like a documentation error. According to the source code, it can only be used as an attribute. The link function does not use restrict so the default is "attribute only".
Can you try using "data-ng-click"? Angular will still work with data- appended before it's attribute names and this should be valid syntax in older browsers.
<a data-ng-click="loadSomeDatas()" href="#">Click here to load some datas</a>
I'm trying to create a form whose layout is entirely data driven.
Example data source:
{
title : "Form Test",
fields : [{
name : "FieldA",
type : "string",
value : "initial value"
}, {
name : "FieldB",
type : "selection",
options : ["1", "2", "3"],
value : "2"
}, {
name : "FieldC",
type : "struct",
value :
[{
name : "FieldC1",
type : "string",
value : "initial value"
}, {
name : "FieldC2",
type : "string",
value : "initial value"
}
]
}
]
}
I think can use ng-repeat and ng-switch to choose the form element depending on the 'type', however I get stuck when it comes to doing this recursively when I get to 'FieldC'.
<span ng-switch on="field.type">
<div ng-switch-when="string">STRING: {{field.value}}</div>
<div ng-switch-when="selection">SELECTION: {{field.value}}</div>
<div ng-switch-when="struct">STRUCT: ????</div>
<div ng-switch-default>DEFAULT:{{field.value}}</div>
</span>
Essentially I want a way that when I encounter a "struct" it recursively applies the ng-switch to the struct fields? Is there any way to "reference" the template so it can be used in multiple places on the same page? The support for template "partials" seems to need to be coordinated server-side via routes which seems like overkill here. Is this something where I need to start digging into creating my own directives?
EDIT I just stumbled across this that looks like it has a decent chance of doing what I want (I have yet to properly test it), is that in the right direction?
You'll want to build a directive that takes this kind of data and builds the form from it.
The way to treat the recursion is to treat every level, including the top level, as another struct. I built a version here: http://jsfiddle.net/U5Kyp/9/
Make sure you read the directive guide in the docs so you understand what's happening: http://docs.angularjs.org/guide/directive
Here is an update of accepted answer for angular.js 1.0.1 There were a few non-compatible changes in stable version:
ng-app is now required directive
scope syntax and semantics were changed
http://jsfiddle.net/9qAfM/1/
In my opinion this is a bad case of the inner platform effect. Quoting wikipedia: "tendency of software architects to create a system so customizable as to become a replica, and often a poor replica, of the software development platform they are using".
AngularJS already has a powerful mechanism for traversing a tree of objects and building a stack of scopes and controllers out of it. You could argue that it is exactly what AngularJS IS.
If you are forced to build forms out of such abominable JSON, I think the easiest way is to turn them into HTML (by means of a simple template language of any kind, server side or client side) and then using the $compile service to turn them into an angularjs application.