I am using ionic to create a mobile app.
I have a list of items and each item has a photo in it.
in my angular template for each item i have:
<img src='http://www.example.com/images/listings/{{listing.id}}/thumb.jpg'>
i use ng-repeat='listing in listings' to display the template.
i keep seeing angular makes one call to the non parsed url first but for each row gets the right image and displays it:
so first it tries getting
http://www.example.com/images/listings/{{listing.id}}/thumb.jpg
not parsing {{listing.id}}.
but then it parses correctly and displays the image correctly in the list:
http://www.example.com/images/listings/3523/thumb.jpg
so if i have a list of 15 items, it makes one call non-parsed {{listing.id}} and 15 calls correctly parsed.
how do i stop this from happening?
You should be using ngSrc instead of using the interpolation directly.
<img ng-src='http://www.example.com/images/listings/{{listing.id}}/thumb.jpg'>
Related
I am working on image click functionality where images change dynamically but the XPath remains the same.
For example:
First image inspect element:
<a id="adlink" target="_top" href="http://www.jimhayes.com/lennielw/index-2.html">
<img id="adimage" src="http://egranary/adverts/Images/lightwire.png" border="0"></a>
First image XPath:
//*[#id="adimage"]
Second image inspect element:
<a id="adlink" target="_top" href="http://www.lifewater.ca/index.html">
<img id="adimage" src="http://egranary/adverts/Images/lifewater1.png" border="0"></a>
Second image XPath:
//*[#id="adimage"]
In this example source and target are changing constantly to redirect to particular page when clicked on image.
How to handle this situation using selenium webdriver?
I think your requirement is to basically check if the links are working fine - not broken.
In that case, I would suggest you to follow this approach - (It is in Java - you can do something similar in other languages as well)
I am trying to extract all href on the page. But if you want an specific xpath just change it here.
driver.get("https://www.yahoo.com");
Map<Integer, List<String>> map = driver.findElements(By.xpath("//*[#href]"))
.stream() // find all elements which has href attribute & process one by one
.map(ele -> ele.getAttribute("href")) // get the value of href
.map(String::trim) // trim the text
.distinct() // there could be duplicate links , so find unique
.collect(Collectors.groupingBy(LinkUtil::getResponseCode)); // group the links based on the response code
Now we could access the urls based on the response code we are interested in.
map.get(200) // will contain all the good urls
map.get(403) // will contain all the 'Forbidden' urls
map.get(404) // will contain all the 'Not Found' urls
map.get(0) // will contain all the unknown host urls
Check here for complete implementation.
I have seen this question in STO but could not find a proper answer.
I am using angular 1.0 and sending an AJAX request to server to get a list of URLs like below format:
https://www.abc.info/tawasol-news/20830168
https://www.abc.info/tawasol-news/20830169
https://www.abc.info/tawasol-news/20830174
and I want to load these URLs in a set of div tags down another.
but I can not see a clear solution how achieve that. please help to to load these URLs inside a div where we can scroll and view item by item.
Thank you
One solution is using object element in your HTML (div).
<object type="text/html" data="your url"></object>
See Mozilla documentation for object here.
I hvae an angular view of a pdf preview that utilizes a controller to fill the view in. I am using pdflayer then to convert the html page into a pdf. The problem however is that no matter how I try and do this the scope variable values never make it into the pdf. I am basically trying to figure out a way to capture the angular view as an html string (data already injected) so that I can pass it to pdflayer. I have tried creating a directive and used replace within the directive then collecting the DOM as a string using .HTML().
For example:
I could like this
<div id="name">{{test.name}}</div>
to become this
<div id="name">Bob Smith</div>
It inevitably however turns into this when i use $('#name').html() and then console log it
<div id="name"></div>
or
<div id="name">{{test.name}}</div>
Any help would be appreciated even if the solution is to use a different method to create the pdf. Ultimately, I need to get a angular view into a formated pdf.
Please check if below library would work for you : https://www.npmjs.com/package/angular-save-html-to-pdf
I've made a menu component to create tabs which contains rendered results from another menu component.
The internal component is using Location/Site Areas (set by Query string) as a criteria and in the main component I use [Plugin:RequestAttribute(...)] to set the Site Area I want the content from in specific tab. In order to do so, I put the internal component inside [InContext(...)][/InContext] tags - in this case Result design code of the main component is:
title="[Property field="title"]">
[Plugin:RequestAttribute key="year" mode="set" value="[Property field='title']"]
[InContext context="autofill"]
[Component name="omantel_en/investors/financial snapshots/financial statement menu" startPage="" resultsPerPage=""]
[/InContext]
</div>
The header ends with <div class="tab selected", while separator is set as <div class="tab" which in the end construct a valid HTML structure (of that I'm sure).
Tabbing is held by javascript I put in the beggining of header and works fine.
Everything works fine while using Preview option - content is generated properly, I can even use Preview on site I actually want the component to be used on and this will give me desired result.
The problem occurs when I put the main menu component tag in published Article. Then it shows only tabs, without any content from the inner component. It looks as if the [Plugin:RequestAttribute(...)] tag that is used as substitute for Query string stops working.
I already tried to put the main menu component tag (in the actual Article) inside [InContext(...)][/InContext](with all of possible options) but it gave no good result. I'm kind of new in using IBM websphere~.
Any suggestions?
Actually it was a problem with Libraries - I simply put wanted content in single library and now it works fine.
Image not showing in ng-repeat, getting all data from indexeddb and binding to page everything show up expect img in blackberry 10 webworks
<img data-ng-src='{{item.Picture}}' width="100px;" height="100px;"/>
{
id:48758,
Botanical_name:"Cladothamnus pyroliflorus",
Common_name:"Himalayan Cotoneaster ",
Picture: "images/Fplants/Cladothamnus pyroliflorus.png",
},...
This wouldn't seem like an issue with IndexedDB.
For non-Angular directive attributes, such as src you want to interpolate as in the code below:
<img src='{{item.Picture}}' width="100px;" height="100px;"/>
For Angular directive attributes, there's no need for such interpolation:
<img data-ng-src='item.Picture' width="100px;" height="100px;"/>
As your data is going to be undefined on bootstrap, you want to use the latter approach. It prevents the browser from trying to load undefined as an image source.
Also, please note vaibhav's comment above. Without a leading slash, you'll load the images directory as relative to the current. While that may be what you're going for, it's probably going to make your code more reusable to include the leading slash regardless.
Update: If you're in an ng-repeat, note that your scope is not the scope in which the ng-repeat directive appears but it's own, brand new scope. Perhaps try out $parent.item.Picture
I'm having the same problem, it occurs with the image filename having spaces in between , maybe we could write a directive the removes the space from the filename as I'm calling the image via other variable such as title..
app.config(['$routeProvider','$compileProvider',function($routeProvider, $compileProvider){ $compileProvider.imgSrcSanitizationWhitelist('img/');