Is there a way to retrieve the html document of an angularjs web page so that I can reference all the elements on the page? For example, this site has 10 pdfs but when I Chrome-inspect I see that it uses ng-repeat and there is only 1 <li> which is referencing all 11 PDFs with ng-repeat. Any way to get a reference to all the PDFs? Thanks
Related
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
So, over the past week I have looked at loading multiple galleries at once. I have been working in MeteorJS with blaze templates but, the methods I am using aren't working.
Essentially, all my data comes from multiple MongoDB collections which are organized in one main collection. When the website starts, I want to access the list of current collections and for each collection display a gallery of photos.
(Main Photo Page)
{{#each collections}}
{{>gallery collectionName=collectionName}}
{{/each}}
(Gallery Template)
<Template name="gallery">
{{getPhotos}}
</Template>
I have tried using a reusable blaze template that is fed the data and then runs a helper to display the images. It works, but I am having trouble loading only one template/collection at a time. I want to load one first, when that is done, load the next etc.
I have also wondered about using ReactJS for this with MeteorJS on the backend, but before I start, I'm wondering about how easy is it to load components one by one vs templates?
Thanks for any ideas or help!
You could try merging the cursors in a helper, instead of inside the template. This will force the order you like and still be reactive since the find is in a reactive context (the helper).
(HTML)
<Template name="gallery">
{{#each getPhotos}}
<img src="{{this.src}}">
{{/each}}
</Template>
(js)
'getPhotos':function(){
let mergedCursor = [];
for (collectionObject in Template.currentData().collections){
//not clear how you are getting the collections
mergedCursor.concat(collectionObject.find().fetch());
}
return mergedCursor;
}
You could also import the collections in the same js file and merge them directly.
I want to create in angular a page with 2 views. One, a navigation view has a list of ~1000 objects along with some options to filter them e.g.
<ul>
<li ng-repeat="object in objects| filter:query | subset:subsetOp">
{{objectname}}</a>
</li>
</ul>
The list of objects is obtained by a REST query using an Angular resource.
When the name of an object is clicked I want to main part of the page to query for additional information about the clicked object and display it.
The catch comes from the fact that I need the detail pages to have URL's that can be shared, bookmarked etc and that I don't want to have to re-query the list of objects all the time.
I can only find examples using ng-route to completely replace the page - loosing the navigation, our ui-route which seems to involve defining a list of states in javascript
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'>