I tried to translate project oppia.org
The code (angularJs, in template) has some things - <[stateName]>, I dont understant its construction <[]>. is It a variable? or is it a directive? is It a scope? Where is its value?
Code:
<h4 ng-if="!stateNameEditorIsShown" ng-click="openStateNameEditor()" class="oppia-editable-section">
<[stateName]>
<span ng-if="editabilityService.isEditable()" class="glyphicon glyphicon-pencil oppia-editor-pencil" title="Edit State Name"></span>
</h4>
Since jinja2 and angularjs both want to use {{ and }} for interpolation, one of them has to give. It's unclear from this example if that's angularjs or jinja2. If you explore the code you're translating, and find something like
$interpolateProvider.startSymbol('<[');
$interpolateProvider.endSymbol(']>');
then it's angularjs code that's using the alternative binding markers.
Edited to add:
See https://code.google.com/p/oppia/source/browse/core/templates/dev/head/app.js lines 38-39. That's where angularjs is being configured to use alternate binding markers.
I found it!
In file feconf.py:
DEFAULT_INIT_STATE_NAME = 'First Stage'
Neither. This is the alternative interpolation markup that your oppia.org code has been configured to use. I guess one of your programmers didn't like the default {{...}} mustache syntax and they went with <[...]> instead. The value will come from the same place as with the standard {{...}} markup.
Find this in your code and it will make more sense:
oppia.config([ "$interpolateProvider","$httpProvider",
function(a,b){
a.startSymbol("<[");
a.endSymbol("]>");
... ... ...
API doc on $interpolateProvider https://docs.angularjs.org/api/ng/provider/$interpolateProvider
Hope this helps.
Related
I´m migrating from a really old version of ui-boostrap to the new one.
On the previous version we have only popover="myhtml"
Now is needed to have popover-html and sanatize the html.
The problem is when we have the html inline, when we have the html on a variable of the scope is simple as
uib-popover-html="getPopoverContent(searchResultHtml)"
But the ones that were with the html inline, when i try to use the same syntaxis fails becouse uib-popover-html="getPopoverContent('theHtml')"
theHtml normally have quotes who breaks all
Example of the function that fails
uib-popover-html="getPopoverContent('<ul class="list-unstyled"><li><span class="text-muted">true_ip:</span> {{txn.thm_info.true_ip}}</li>"')
The problem is that the double quotes closes the uib-popover-html, so get broken all.
What is needed here, I tried to scape with / the inner quotes,but failed.
I know that the correct way is do templates, is only for do a quick migration to allow us to gain more time to later migrate all things.
Thanks
You know that the right thing to do is to use a template, and you have an angular expression anyway inside your HTML, so a template is required.
So just do the right thing, and use a template. Don't try to find nasty shortcuts. That will make the code much cleaner as a bonus.
<script type="text/ng-template" id="myPopoverTemplate.html">
<ul class="list-unstyled">
<li><span class="text-muted">true_ip:</span> {{ txn.thm_info.true_ip }}</li>
</ul>
</script>
<button uib-popover-template="'myPopoverTemplate.html'" ...>
I am using angularjs from 2 months but never comes to problem like this, so thought of sharing with you people and getting some good suggestion on that. Here I am trying to apply ul/nav-group element dynamic values. Everything is working fine means, if I see developer tools on browser it gets value and everything, but not the +/- sign. I search on google its saying that it loads after DOM creation so it is not showing that. But no buddy tells the solution for that.
Consider my code:
<nav:group ng-repeat="parentChild in parentChildList" title="{{parentChild.filterText}}">
<nav:item data-view="/ui/icons/fa" ng-repeat="childs in parentChild.childList" data-icon="fa fa-lg fa-fw fa-plane" title="{{childs.filterText}}" />
</nav:group>
The value for particular fields are straight forward means its simple list.How the directive can solve this problem.
Appreciate any suggestions . Thanks.
Add an ng-cloak directive on the body tag of your app to prevent loading the element until angular has finished loading.
Your body tag would look like this:
<body ng-cloak>
...
</body>
You could also fix this by using promises in your services, that is definitely the best practice regardless, but ng-cloak is a quick and easy fix.
Hope that helps! If ng-cloak doesnt work for you post snippets of your controller and service and I will help you add promises.
Good Luck!
-Justin
I am going to create an application with Angularjs. I have several modals (with the ng-dialog libraries) to create, modify data like an user for example.
When I open it, I can always see during several milliseconds names variables with accolades like {{user.name}}, before it renders the real value.
It is not really beautiful and then if someone has an idea about how to manage this type of display problems, please share it.
Thank you in advance.
There are couple of ways to deal with it, you could either use ng-bind or ng-cloak directives
Check angular ngCloak directive documentation
https://docs.angularjs.org/api/ng/directive/ngCloak
You can use ng-bind. Here is the official documentation on it:
It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed >by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, >it makes the bindings invisible to the user while the page is loading
Usage:
Hello <span ng-bind="name"></span>!
I'm trying to remove jquery from my Angular.js app in order to make it lighter, and put Angular's jqLite instead. But the app makes heavy use of find('#id') and find ('.classname'), which are not supported by jqLite, only 'tag names' (as per documentation)
wondered what do u feel would be the best approach to change it. One approach I thought about is to create custom HTML tags. for example:
change
<span class="btn btn-large" id="add-to-bag">Add to bag</span>
to
<a2b style="display:none;"><span class="btn btn-large" >Add to bag</span></a2b>
and
$element.find('#add-to-bag')
to
$element.find('a2b')
Any thoughts? other ideas?
thanks
Lior
Essentially, and as-noted by #kevin-b:
// find('#id')
angular.element(document.querySelector('#id'))
//find('.classname'), assumes you already have the starting elem to search from
angular.element(elem.querySelector('.classname'))
Note: If you're looking to do this from your controllers you may want to have a look at the "Using Controllers Correctly" section in the developers guide and refactor your presentation logic into appropriate directives (such as <a2b ...>).
angualr uses the lighter version of jquery called as jqlite which means it doesnt have all the features of jQuery. here is a reference in angularjs docs about what you can use from jquery.
Angular Element docs
In your case you need to find a div with ID or class name.
for class name you can use
var elems =$element.find('div') //returns all the div's in the $elements
angular.forEach(elems,function(v,k)){
if(angular.element(v).hasClass('class-name')){
console.log(angular.element(v));
}}
or you can use much simpler way by query selector
angular.element(document.querySelector('#id'))
angular.element(elem.querySelector('.classname'))
it is not as flexible as jQuery but what
If elem.find() is not working for you, check that you are including JQuery script before angular script....
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>