条件的HTML href属性

Question

我是web-development新手。 我正在使用angular-js这里，我有一个类似的功能，当我单击一个按钮时，我会收到来自后端的响应，如果是真的，那么我会将那个按钮更改为下载按钮。 因此，单击此按钮后，我正在执行ajax调用，并得到一个url ，可以使用该url下载相应的文件。 所以，这里我使用href来下载文件。所以，我关心的是当我单击下载时，只有它应该获取该URL，并且也可以通过使用href下载文件。

我的代码就像-

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>

调节器

$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;        
}

因此，由于href和downloadButton，在这里我遇到了一些问题。 因此，如何在下载单击时调用函数并获取URl，同时获取该URL并在href中使用它，以便它也可以下载文件。 Href和downloadButton的目的是相同的。

Answer 1

您只需要在按钮中添加下载属性

<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>

在控制器中添加$ http

$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;
               }

希望这对您有帮助

Answer 2

尝试如下。 不要混入<a> and <button>因为您有按钮单击并且还锚定了单击事件。

<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>