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.

Answer 1

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

Answer 2

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>