How can I download the files using AngularJS? - angularjs

I want to list all the files in <a></a> when clicking it we need to download it from the corresponding folder.
I tried the following code
<div ng-repeat="file in files">
<a download="{{file.name}}" href="/path of the file">{{file.name}}</a>
</div>
How can I achieve this?
Can anyone help me?

If you have an anchor tag that you'd like to not be processed by angular, you'll need to use target="_self" or some other valid target.
See the $location documentation
This should work for you:
<div ng-repeat="file in files">
<a target="_self" download="{{file.name}}" href="/path of the file">{{file.name}}</a>
</div>
Another option may be to use the full path to the filename, but this doesn't seem to work in every case.
Here's a plunker with examples.

Related

Scraping based on "nested property"

After having created a few different spiders I thought I could scrape practically anything, but I've hit a roadblock.
Given the following code snippet:
<div class="col-md-4">
<div class="tab-title">Homepage</div>
<p>
<a target="_blank" rel="nofollow"
href="http://www.bitcoin.org">http://www.bitcoin.org
</a>
</p>
</div>
How would you go about selecting the link that is in within <a ... </a> based on the text within the tab-title div?
The reason that I require that condition is because there are several other links that fit this condition:
response.css('div.col-md-4 a::attr(href)').extract()
My best guess is the following:
response.css('div.col-md-4 div.tab-title:contains("Homepage") a::attr(href)').extract()
Any insights are appreciated! Thank you in advance.
Note: I am using Scrapy.
How about this using XPath:
response.xpath('//div[#class="tab-title" and contains(., "Homepage")]/..//a/#href')
Find a div with class tab-title which contains Homepage inside, then step up to the parent and look for a child on any level.
EDIT:
Using CSS, you should be able to do it like this:
response.css('div.tab-title:contains("Homepage") ~ * a::attr(href)')

ng-include not loading partial view

I'm currently working on a project, that I've got some problems with. Whatever I try to do, ng-include can't load a partial view I have in another folder.
I want to load view.html file in pagination folder. My file is in the folder which is on the same level that pagination folder.
Here's my site view fragment
<div class="container">
<div class="col-sm-6" id="NEWS">
<div class="well" ng-repeat="info in news">
<p>
{{info.description}}
</p>
</div>
<ng-include src="'/pagination/view.html'"></ng-include>
</div>
</div>
My view.html has a single caption test for testing purpose.
I also tried using this code:
<div ng-include src=....
<div ng-include="....
<ng-include src="'../pagination/view.html".
Nothing seems to work. Someone knows what is the problem about?
My file is in the folder which is on the same level that pagination folder.
You're propably passing a wrong path for the html template.
You have to refer to your template directory as if you're writing in your index.html file. So no matter which html template the ng-include directive exists you have to give it the path as if your root is the place where index.html exists.
Also try to avoid using '/' before the path.
e.g.
Suppose you're having the following folder tree:
---index.html
---/templates/app.html
---/tempates/pagination/view.html
In case you're trying to include the view.html in your app.html then you would do it like this:
<ng-include src="'templates/pagination/view.html'"></ng-include>
I hope it helps.
The cause of this type error are
passing a wrong path for the html template.
Passing path is not in lower case .
In angularJS all reference path must be in lower case like
<div ng-include="'/content/patna/partials/skive/test-partial.html'"></div>

Using ng-repeat with partial url inside ng-include

I am trying to use ng-repeat to spit out part of a url (my.url) within ng-include. Unfortunately I cant seem to get it to work. It works when I dont place it within an ng-include, so I know that part isnt the issue. THe issue seems to be when I place {{my.url}} inside ng-repeat and attached to the first (static) part of the url.
What i am aiming for is the ng-include to use "filepath/filepath/mypage.html
my.url is the mypage.html bit.
Anybody able to advise?
<uib-tab ng-repeat="stuff in myList" heading="{{my.text}}" class="sg-tabbed-titles">
<div class="tab">
<ul class="tabbed-list">
<li class="tab-content">
<div ng-include="'\filepath/filepath/{{my.url}}\'"></div>
</li>
It should be
<div ng-include="'filepath/filepath/' + my.url"></div>
ngInclude takes expression. It means that you need to use normal string concatenation just like you would do in regular javascript code.

Using expression from ng-repeat inside an ng-include

I may have worded this title incorrectly but I am hoping to still get some help. I am trying to use an expression that I get from an ng-repeat to include an new page using ng-include but it is not rendering. I can write in the page I want, but I want to use the expression to include multiple pages dynamically
<div ng-app="" id="container" ng-controller="pagesController">
<span ng-repeat="x in pages">
{{x.Page | uppercase}}
<b ng-if="!$last" href="#"> - </b>
<div ng-include="'{{x.HTML}}'" name="{{x.Page}}"></div>
</span>
But if I manually enter the pages like so:
<div ng-include="'generic.htm'" name="generic"></div>
It works as expected.
I am getting used to Angular.js obviously and I am not sure if this is possible or if I can do what I want really. Any help would be appreciated.
ng-include is an angular directive, and assuming x.HTML is a string, omit the {{}} and the single quotes:
ng-include="x.HTML"

ckeditor strips <span> and style attributes

I have a Drupal 7 site using ckeditor 4.2. I've created a basic page node and put a span inside an h2 heading in the body. I hard coded it in the html view. It looks fine but if I go back to edit the page, my has gotten stipped out of the html and also any style="" I've put into the html also. I've looked at the ckeditor config and text-formats. I've set the only formats allowed to be text and full html so I'm not using filtered at all. What gives? I've used the editor many times before but probably not this version.
If you are using the CKeditor module then there is an option in Advanced Options that is also mentioned in the module homepage where you should set:
config.allowedContent = true;
None of the above solutions worked for me. What I found was that CKEditor was removing empty <span> tags from the HTML. For example:
<div class="section-heading">
<span class="sep-holder-l"><span class="sep-line"></span></span>
<h4>Section Header</h4>
<span class="sep-holder-r"><span class="sep-line"></span></span>
</div>
Would yield:
<div class="section-heading">
<h4>Section Header</h4>
</div>
However, if I added a non-breaking space in the innermost <span>, CKEditor didn't edit the HTML:
<div class="section-heading">
<span class="sep-holder-l"><span class="sep-line"> </span></span>
<h4>Section Header</h4>
<span class="sep-holder-r"><span class="sep-line"> </span></span>
</div>
Hopefully that helps someone out there!
In Drupal 7 there's no automatic synchronization between CKEditor's filter (called the Advanced Content Filter) and Drupal's filter. As I understand you configured latter one, but not the first one. See config.extraAllowedContent.
CKEditor 4.+ will remove any empty tags it finds which are in CKEDITOR.dtd.$removeEmpty as part of the HTML parsing process.
See this answer for a hack to avoid it.

Resources