Html href attribute on the condition

Question

I am new to web-development. I am using angular-js .Here , I have a functionality like , when I click on a button then I get a response from back-end , If that is true then I am changing that button to download button. So, after clicking on this, I am doing an ajax call , with it I get a url, with which I can download a respective file. So, Here I am using a href to download the file.So, My concern is when I click on download that time only it should get that url and also by using href should download a file.

My code is like -

HTML -

<button class="btn btn-labeled  btn-info" title= "{{ isAvaliable ? 'Download' : 'click to track'}}" ng-disabled="!file.processed" data-ng-click="performAction(file.attributes.name,file.attributes.cn, isAvaliable)">
         <a ng-href="{{url}}" target="_blank" ></a>
        <i ng-class="isAvaliable ? 'fa fa-download' : 'glyphicon glyphicon-text-width'" aria-hidden="true"></i>
</button>

controller

$scope.performAction  = function(fileName, cn, isAvaliable) {
                        if(isAvaliable) {
                             $scope.downloadfile(fileName);
                        } else {
                            $scope.moveTofolder(fileName,cn);
                        }
  };

$scope.downloadfile = function(fileName) {
                    uploadService.downloadtracker(fileName)
                        .then(function (response) {
                            $scope.url = response.data;

                        },
                        function (error) {

                        })
                        .finally(function () {
                                                       }
                        );

           };

$scope.moveTofolder = function(fileName,cn) {
  // Here also I am calling some service and  I am getting response .\
  /// Here I am changing the button 
  $scope.isAvaliable = true;        
}

So, Here I am getting some problems, because of the href and the downloadButton . So, How can I call a function on download click and get the URl and at the same time get that url and use it in the href so that It can download the file as well. Href and downloadButton are for the same purpose.Thanks in advance.

Would you mind to remove the horizontal scollbars and fix your spelling? — Reporter, May 22 '17 at 11:45
Chech the Href atribute "download"... it makes a link to be downloaded (the href src) into your pc. — Roy Bogado, May 22 '17 at 11:47
$scope.performAction function also have download function call. And why you call both functions. — Manikandan Velayutham, May 22 '17 at 13:09
I am calling it because See, I have a button on which at start it is like track so then it will call a moveTofolder method. then On this if it successfully moved then it will change the same track button to download button. Now On this click, First I need to get the Url and then I want to download the file.So, I want to have both actions on the same click. — , May 22 '17 at 13:15

score 0 · Answer 1 · answered May 22 '17 at 11:56

You just need to add download attribute in your button

<button class="btn btn-labeled  btn-info" title= "{{ isAvaliable ? 'Download' : 'click to track'}}" ng-disabled="!file.processed" data-ng-click="performAction(file.attributes.name,file.attributes.cn, isAvaliable)" ng-click=“downloadfile
({{url}})”>
         <!— <a ng-href="{{url}}" target="_blank" ></a> —>
        <i ng-class="isAvaliable ? 'fa fa-download' : 'glyphicon glyphicon-text-width'" aria-hidden="true"></i>
</button>

Add $http in controller

$scope.downloadfile = function(fileName) {
                //here I am calling a service and I am getting a responce which contains a url.
            $scope.$emit('download-start');

            $http.get(fileName).then(function(response) {
                $scope.$emit('downloaded', response.data);
            });

                    $scope.url =  responce.data;
               }

Hope this help you

I have updated my downloadFile methods, It like that I am not getting waht you want to say. — , May 22 '17 at 12:38

Manikandan Velayutham · Accepted Answer · 2017-05-22T12:55:42.703

0

Try like below. Don't mingle <a> and <button> because you have button click and also anchor click event.

<a ng-href="{{url}}" ng-click="Download()" ></a>

$scope.Download = function(){
//some other code
window.open($scope.url);
}



 <button class="btn btn-labeled  btn-info" title= "{{ isAvaliable ? 'Download' : 'click to track'}}" ng-disabled="!file.processed" data-ng-click="performAction(file.attributes.name,file.attributes.cn, isAvaliable);downloadfile
(url)">

        <i ng-class="isAvaliable ? 'fa fa-download' : 'glyphicon glyphicon-text-width'" aria-hidden="true"></i>
</button>

edited May 22 '17 at 12:55

answered May 22 '17 at 12:48

Manikandan Velayutham

2,228
1
15
22

Actually the problem is that the same button gets turned into the download button. – May 22 '17 at 12:52
First I am calling download method to get the url, and then I am using that url as a link in the href. – May 22 '17 at 12:53
Then use ng-show/hide .. Which button you need after get the link, just show it – Manikandan Velayutham May 22 '17 at 12:54
We don't need two ng-click. You can give more function call in single ng-click. see my update button code – Manikandan Velayutham May 22 '17 at 12:57
It is downloading a file two times now. – May 22 '17 at 12:58
As per your code. ng-click button download happening also download happening . So two time. Are you try with ng-show/hide not working try with ng-if – Manikandan Velayutham May 22 '17 at 13:01
1

Working fine , but only concern is about window.open($scope.url) , It is changing a window for microseconds . – May 22 '17 at 13:19
I can't get.. A new window or tab is opened. If a window with the same name already exists, the existing window is refreshed – Manikandan Velayutham May 22 '17 at 14:01
It just, for fraction of second it opens a new window and then after download gets back to the original one. – May 23 '17 at 04:59
try window.open(url , '_blank'); or window.open(url , '_tab'); – Manikandan Velayutham May 23 '17 at 05:35
Thanks a lot for this , do you have any idea about the popup blocker? Because when I click on download then I need to allow the popups then it will download. – May 24 '17 at 06:42
Pop-ups are blocked only when if the browser suspects non-user is initiating the pop-up. – Manikandan Velayutham May 24 '17 at 07:04
https://stackoverflow.com/questions/2587677/avoid-browser-popup-blockers – Manikandan Velayutham May 24 '17 at 07:04

Html href attribute on the condition

2 Answers2