ボタンをクリックしてインストールするファイルの名前をangularjsでクリック

Question

私のウェブページはサーバ上のファイルのリストを表示し、ファイル名の隣には「インストール」ボタンがあります。 「インストール」をクリックすると、インストールする対応ファイルの名前をサーバーが受け取るはずです。私の現在のコードはサーバーへのファイルのpsas名にできません。あなたは、ボタンをクリックするとファイルの名前をサーバーに送る方法をお勧めしますか？

は、ここに私のコード

app.controller('RdaController', ['$scope', 'RdaService', 
 
    function($scope, RdaService) { 
 
    $scope.greeting = "Hello world"; 
 

 
    $scope.file = "installJob.zip"; 
 
    $scope.sendToCTP = function($scope) { 
 
     return RdaService.SendFileToCTP($scope); 
 
    }; 
 
    } 
 
]); 
 

 

 
app.service('RdaService', ['$http', 
 
    function($http) { 
 
    this.SendFileToCTP = function($scope) { 
 
     return $http({ 
 
     method: "GET", 
 
     url: "../api/CTP/installJobFromFile/" + $scope.file, 
 
     headers: { 
 
      'Content-Type': 'application/json' 
 
     } 
 
     }).success(function(data) { 
 
     //$scope.sendToCTP = data; 
 
     console.log(data); 
 
     }).error(function(data) { 
 
     console.log(data); 
 
     }); 
 
    }; 
 
    } 
 
]);

<h2>List of Files available</h2> 
 
<table class="table table-striped"> 
 
    <tr ng-repeat="file in listOfFiles"> 
 
    <td>{{ file }}</td> 
 
    <td><span class="btn-group" role="group"><button type="button" class="btn btn-default" ng-click="sendToCTP(file)">install</button><button type="button" class="btn btn-default">delete</button></span> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

あなたがサービスに$scopeを渡すべきではないです。ただし、fileNameを直接渡すことはできます。試してみてください：

app.controller('RdaController', ['$scope', 'RdaService', 
    function($scope, RdaService) { 
    $scope.greeting = "Hello world"; 

    $scope.file = "installJob.zip"; 
    $scope.sendToCTP = function(file) { 
     return RdaService.SendFileToCTP(file); 
    }; 
    } 
]); 


app.service('RdaService', ['$http', 
    function($http) { 
    this.SendFileToCTP = function(file) { 
     return $http({ 
     method: "GET", 
     url: "../api/CTP/installJobFromFile/" + file, 
     headers: { 
      'Content-Type': 'application/json' 
     } 
     }).success(function(data) { 

     console.log(data); 
     }).error(function(data) { 
     console.log(data); 
     }); 
    }; 
    } 
]); 

あなたのHTMLはこれでうまくいくようです。 $ httpが返ってから何らかのアクションを実行する必要がある場合は、RdaService.SendFileToCTP呼び出しで.then（）を使用してアクションを実行できます。

Answer 2

app.service('RdaService', ['$http', 
    function($http) { 
    this.SendFileToCTP = function(filename) { 
     return $http({ 
     method: "GET", 
     url: "../api/CTP/installJobFromFile/" + filename, 
     headers: { 
      'Content-Type': 'application/json' 
     } 
     }).success(function(data) { 
     console.log(data); 
     // DONT FORGET TO RETURN DATA HER 
     return data ; 
     }).error(function(data) { 
     console.log(data); 
     return null ; 
     }); 
    }; 
    } 
]); 

あなたはこのようRdaService.SendFileToCTP($scope.file).then()を使用する必要が約束$ HTTPの結果を得るために：

app.controller('RdaController', ['$scope', 'RdaService', 
    function($scope, RdaService) { 
    $scope.greeting = "Hello world"; 

    $scope.file = "installJob.zip"; 
    $scope.sendToCTP = function($scope.file) { 
     RdaService.SendFileToCTP($scope.file).then(function (res) { 
      // HER you can use the result of your callback on $http 
      console.log(res); 
      $scope.result = res ; // for exemple 
     }); 
    }; 
    } 
]);