2016-10-14 1 views
1

Ich möchte eine Variable namens hideProgressBar die Direktive "ng-hide" in dieser Ansicht durch den $ scope in meinem Steuerelement aktualisieren. Aber es funktioniert nicht.Warum angular ng-hide nicht korrekt aktualisiert wird

Die folgende Zeile funktioniert:

$ Scope.hideProgessBar = true; 

Aber die Linie unten nicht funktioniert:

$ Scope.hideProgessBar = false; 

den vollständigen Code siehe unten:

.controller('UltimasEdicoesCtrl', function($scope, $cordovaFileTransfer, $cordovaFileOpener2) { 
$scope.hideProgessBar = true; 

    $scope.Download = function() { 
     $scope.hideProgessBar = false; 
     ionic.Platform.ready(function($scope){ 

     var url = "http://www.wgontijo.com.br/teste.pdf"; 
     var filename = url.split("/").pop(); 
     var targetPath = cordova.file.externalRootDirectory + 'Pictures/' + filename; 

      $cordovaFileTransfer.download(url, targetPath, {}, true).then(function (result) {     
       $cordovaFileOpener2.open(
        targetPath, 
        'application/pdf' 
       ).then(function() { 
         // file opened successfully 
        }, function(err) { 
         alert('erro ao abrir o arquivo') 
        }); 

      }, function (error) { 
       alert('Erro ao abrir o arquivo'); 
      }, function (progress) { 
       $scope.downloadProgress = (progress.loaded/progress.total) * 100; 
      }); 
    }); 
    } 

}) 

HTML

<div class="w3-progress-container" ng-hide="{{hideProgessBar}}"> 
     <div id="myBar" class="w3-progressbar w3-green" style="width:{{downloadProgress}}%"> 
      <div id="demo" class="w3-center w3-text-white">{{downloadProgress}}%</div> 
     </div> 
</div> 
+0

Entfernen Sie die geschweiften Klammern in 'ng-hide'. Es sollte 'ng-hide =" hideProgessBar "' sein. –

+0

@GentiSaliu hat funktioniert, aber jetzt hat die Variable {{downloadProgress}} die Aktualisierung gestoppt –

Antwort

0

Versuchen Sie folgendes:

<div class="w3-progress-container" ng-hide="hideProgessBar"> 
    <div id="myBar" class="w3-progressbar w3-green" ng-style="{ width: downloadProgress + '%' }"> 
     <div id="demo" class="w3-center w3-text-white">{{downloadProgress}}%</div> 
    </div> 
</div> 
+0

hat funktioniert, aber jetzt hat die Variable {{downloadProgress}} die Aktualisierung gestoppt –

+0

Probieren Sie '$ scope. $ apply' on '$ scope.downloadProgress = (progress.loaded/progress.total) * 100;'. –

+0

Ich habe die Antwort aktualisiert. – Feeco

5

Sie müssen nur die Klammern entfernen {{}} von ng-hide="{{hideProgessBar}}" und alles funktioniert. Der Grund, warum es nicht mit den geschweiften Klammern funktioniert, da die ng-hide Direktive bereits nach Angular-Attributen sucht, also gibt es keine Angular, dass es Variablen gibt.

+0

Works. aber jetzt variable downloadProgress in ng-style = "{width: downloadProgress + '%'}"> funktioniert keine Idee? –

+0

Versuchen Sie: ng-style = "{width: downloadProgress%}"> – Jigar7521

Verwandte Themen