I am trying to apply angular-translate using the 'translate="KEY"' directive.
However, if I add this to a <p> tag and then to an <a> tag within this, only the first translation appears. When I view this in console, the translation appears to work, but it does not appear on the screen.
<p translate="CLICK">
</p>
This should output as:
Click here
But it appears only as:
Click
Thanks for any help.
The problem is that the <p> surrounds the <a> tag. The translate directive replaces the content of <p> with the translation. So the result is <p>Click</p>.
The directive itself is working fine, see my working Plunker .
-
$translateProvider.translations('en',{
'LINK_A': 'Stackoverflow',
'LINK_B': 'Google'
}).preferredLanguage('en');
Related
Say I wanna have the popup directive with ability to declare it's content within a same HTML view:
<a popup>
<span>Click me</span>
<popup-content>
<div with-some-other-directives></div>
</popup-content>
</a>
I've tried:
At popup directive, modify HTML during compile phase: get the content of the <popup-content>...</popup-content> element and then remove it completely. This way there are 2 problems:
with-some-other-directives compiles and links.
If I have an multiple <a> elements within <popup-content> I see some strange behavior. Suppose this has something to do with nesting an <a> inside an <a>.
Making a separate popup-content directive, that has own compile phase handler. There, I could either access controller of parent popup directive and set the HTML there then self remove it.
Either way I get compilation and execution of with-some-other-directives directive.
Now I have 2 questions:
How to prevent HTML code within <popup-content> from being executed?
Are there better alternatives?
EDIT
The final goal is to use HTML code taken from popup-content, compile it against the scope of popup directive and append to BODY.
Do you know why is the {{ project.title }} before I see the real value of the scope.
And how to solve that ?
EDIT : <title>{{ pageTitle }}</title>
Page is loading
Page completely loaded
Your views for Angular.JS apps are just static HTML. If you remove the script tag that references Angular.JS, you'd end up with a page full of curly brackets in plain sight that never get replaced.
When your browser finished loading Angular.JS and loading your application, the expressions in those curly brackets are evaluated. That's why you see, for a brief moment, {{…}} in your page title.
As noted by others, the ng-cloak directive is usually the way to get rid of the flickering before the app is fully loaded.
But since ng-cloak is just CSS, it cannot be applied to the page title. You'll need ng-bind for that, as noted here.
<title ng-bind="pageTitle">Default Title</title>
You should be showing the code, but in general it's probably because you aren't using ng-cloak https://docs.angularjs.org/api/ng/directive/ngCloak
However, in the case of the title, you need to use ng-bind=project.title instead <title>{{ project.title }}</title>
Check How to hide {{title}} in <title> tag while using AngularJS?
To prevent this, you should use ng-bind instead of {{ }} for the first screen of your app.
ng-bind is a directive that is added to an element attribute, so it is displayed only when the page is loaded.
According to the description of ngBind, we usually use {{ expression }} to replace ng-bind. But in a first-loading situation, image that you firstly load AngularJS(maybe in index.html), it'll show the original {{ }}. After that, it transits to what u need. To overcome it, you can use ngCloak or just use ng-bind in your first page.
OK, please check this ?
Is it possible to put html content into a popover?
this is the string that i need to put into the popover
HTML
$scope.info="sentence " +
"<ul>"+
"<li>first list member</li>"+
"<ul>"+
"<li>element of the first list</li>"+
"</ul>"+
"</li>"+
"<li>second element</li>"+
"<ul>"+
"<li id=\"infoLi\">element of the second</li>"+
"</ul>"+
"<li>third element</li>"+
"<ul>"+
"<li id=\"infoLi\">first element of the third</li>"+
"<li id=\"infoLi\">second element of the third</li>"+
"</ul>"+
"</ul></div>"
I have seen in the documentation of angular-ui-popover, that it is possible to set the option of the popover, and seeing around the web I find someone says that it is possible, in this option, to set a parameter HTML to true and get this result.
I have found no sample of that, and i don't know if it is true, my first problem to attempt this is that i didn't understand how to set the options.
A possible solution for me is even to leave a string in the popover but i need to use the new line tag, that i see it doesn't work in the popup content.
EDIT
maybe i wasn't so clear, i'm trying to do that with angular ui and ui bootstrap.
ok i have found a solution, that as i saw, for the moment it doesn't work for the popover ,while for the tooltip yes.
HTML
<button id="infobtn" tooltip-html-unsafe="<div>first list member
<li>element of the first list</li>
second element
<li id='infoLi'>element of the second</li>
third element
<li id=\"infoLi\">first element of the third</li>
<li id=\"infoLi\">second element of the third</li>
</div>
"tooltip-trigger="mouseenter">
<img src="images/info.png"></button>
The tag tooltip-html-unsafe make possible to insert a DIV or anything else is html, in the tooltip content, i have try to use it in the popover too but for some reason it doesn't work. I don't know if the cause was something that i was doing wrong or else, so i decided to use ui.tooltip module and i have resolved the problem.
I am doing angularjs development and have a bevy of HTML ng-templates included inside tags in my HTML, like so:
<script type="text/ng-template" id="content_listing.html">
<div class="item_content">
<div class="horiz-nav-menu">
<h3> {{sectionName}} </h3>
<ul>
<li ng-repeat="navLink in navLinks"> <a href='#/{{navLink.Target}}' title='{{navLink.Tip}}'>{{navLink.Text}}</a> </li>
</ul>
</div>
</div>
</script>
It's highly annoying that my editor of choice, Vim, does not properly highlight the HTML because it is inside a script tag. As a result, I have created a custom syntax region for Vim and plopped it into a file after/syntax/html.vim which I have confirmed is getting processed when Vim starts up:
unlet b:current_syntax
syn include #HTML $VIMRUNTIME/syntax/html.vim
syn region htmlTemplate start=+<script [^>]*type *=[^>]*text/ng-template[^>]*>+ keepend end=+</script>+me=s-1 contains=#HTML,htmlScriptTag,#htmlPreproc
The problem is that the highlighting behavior is flaky (Vim 7.2). To make the highlighting work properly, I have to do things like scroll down so that the section with HTML scrolls off of the page and then scroll back, hit :e to reload the doc, etc. Also, even when the highlighting is displaying correctly, when I go to edit the HTML inside the tag the highlighting for that block turns off.
I am no expert on Vim syntax highlighting ... has anyone run into a similar thing? It looks to me like my region definition looks fine...
I am trying to find Submit element. My HTML structure is as below.
<div>
<span class="combutton">Submit</span>
</div>
<div>
<span class="combutton">Cancel</span>
</div>
In browser using firebug I tried
$('div .combutton')[0].click()
which clicks on submit perfectly. But using selenium driver this element is not found. Please tell me how to do this using
driver.findElement(By.css("CSSSELECTORSTRING"))
What you did in Firebug shouldn't have any effect since it's clicking on a span and not the a inside it.
This should work, unless you omitted certain parts of your markup that would otherwise prevent it:
driver.findElement(By.cssSelector("div:first-child .combutton a")).click();
try that :
driver.findElement(By.xpath("//div span.combutton a[contains(.,'Submit')]")).click();
or
driver.findElement(By.xpath("//div span.combutton[0] a")).click();