Question

我想通过我控件中的$ scope更新名为hideProgressBar的变量，该视图中的指令“ng-hide”。但它不起作用。

以下一行有效：

$ Scope.hideProgessBar = true;

但下面这行不起作用：

$ Scope.hideProgessBar = false;

请参阅以下完整代码：

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

Answer 1

您需要从{{}}删除大括号ng-hide="{{hideProgessBar}}"，一切正常。之所以不使用花括号，是因为ng-hide指令已经在寻找Angular属性，所以没有告诉Angular存在变量。

Answer 2

试试这个：

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

为什么Angular ng-hide无法正确更新

2 个答案: