关于条件的Html href属性

时间:2017-05-22 11:43:08

标签: javascript jquery html angularjs

我是web-development的新手。我正在使用angular-js。在这里,我有一个功能,当我点击一个按钮然后我从后端得到一个响应,如果这是真的那么我正在改变该按钮下载按钮。所以,点击这个之后,我正在进行一个ajax调用,我得到一个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中使用它以便它也可以下载该文件。 HrefdownloadButton用于同一目的。谢谢。

2 个答案:

答案 0 :(得分:0)

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

即可
<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;
               }

希望这能帮到你

答案 1 :(得分:0)

尝试如下。不要混淆<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>