Question

基本上，我正在导入文件，并在成功/失败时显示引导面板。我正在使用ng-show。该面板仅工作一次。如果我尝试第二次导入文件，面板根本不会显示。我认为它被封闭的方式与角度无关。如何让面板多次显示/隐藏？

这是我的控制器的一部分。

$scope.importValidatedFile = function(){
    var file = $scope.importFile;
    var fd = new FormData();
    fd.append('file', file);
    $scope.loading = true;

    $http.post('rest/importfeed/import/' + $scope.selectedSource.sourceId, fd,{
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    }).
    success(function (data) {
        $scope.loading = false;

       $scope.fileSuccess = true;   //here is the panel


        document.getElementById('fileInput').value = "";
        angular.element(document.getElementById('validate'))[0].disabled = true;
        angular.element(document.getElementById('import'))[0].disabled = true;

    }).
    error(function (error) {
        $scope.danger = true;
        document.getElementById('fileInput').value = "";
        angular.element(document.getElementById('validate'))[0].disabled = true;
        angular.element(document.getElementById('import'))[0].disabled = true;
    }).finally(function () {
        $scope.loading = false;
    });

};

这是html页面上的面板。

 <div ng-show="fileSuccess">
       <div class="row">
       <div class="col-sm-9 col-lg-12">
       <div class="panel-body">
      <div class="col-xs-12 alert alert-success" id="success">

    <button type="button" class="close" data-target="#success" data-dismiss="alert"> <span aria-hidden="true">&times;</span>
       <span class="sr-only">Close</span>
       </button>
      <div class="glyphicon glyphicon glyphicon-ok success-gliph"></div>
      <div class="success-text"><b>Success!</b></div>
      <p class="record-text">The Record was saved.</p>
      </div>
      </div>
     </div>
    </div>
    </div>

我有一种偷偷摸摸的怀疑，它是如何被关闭的以及角度对它的了解程度。

如何让ng-show中的面板多次使用？

编辑**我尝试将此添加到按钮。

<button ng-click="check();" type="button" class="close" data-target="#success" data-dismiss="alert"> <span ng-click="check();" aria-hidden="true">&times;</span>
                                        <span class="sr-only">Close</span>

和角度控制器

 $scope.check = function (){
    alert("in check");
    $scope.fileSuccess = false;
};

它仍然无法正常工作

Answer 1

你可以尝试一下吗？每次调用importValidateFile（）时重置fileSucess，并在你的html中将ng-show更改为ng-if

$scope.importValidatedFile = function(){
    var file = $scope.importFile;
    var fd = new FormData();
    fd.append('file', file);
    $scope.loading = true;
    $scope.fileSuccess = false;

$http.post('rest/importfeed/import/' + $scope.selectedSource.sourceId, fd,{
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined}
}).

ng-show只工作一次

1 个答案: