Question

我真的需要你的帮助，这是更有棱角的指定麻烦。我创建了ng-click测试按钮

<ion-item ng-repeat="document in filtered = (documents | filter: searchFilter | filter: {category_id: categoryFilter.id}: false | orderBy: sortBy)"  type="item-text-wrap">
  <div class="document-functions">
    <form name="downloadForm" method="post" ng-submit="download(document)">
      <button class="buttons button-document-save" ng-if="check(document)">Save</button>
    </form>
  </div>
</ion-item>

带功能

$scope.check = function(document) {
  var url = baseUrl + document.image;
  $http.get(url).success(function() {
    return true;
  })
  .error(function() {
    return false;
  });
};

如果存在图像路径，则返回一切正常。但是我用ng-if尝试了这个函数，它返回无限循环错误，我不明白为什么。如果图像路径存在，我们的想法是不显示文档下载按钮。

Answer 1

所以它无法在ng-if中运行$ http webservice，因为ng-if如此快速地执行循环中的函数而不等待$ http响应，以及导致错误的原因。解决方案是在ng-init中只调用一次webService，将响应值存储在与文档相关的变量（当前的过滤项）中，然后在ng-if中检查此变量。

控制器

.controller('DocumentCtrl', function($http, $scope, $ionicPopup, $timeout, $cordovaFileTransfer, $cordovaFile, $window, localStorageService) {
  $scope.checkDownload = function(document) {
    var url = baseUrl + document.path;
    var filename = url.split("/").pop();
    $cordovaFile.checkFile(cordova.file.documentsDirectory, filename)
    .then(function(success) {
      $scope.file[document.id] = true;
    }, function(error) {
      $scope.file[document.id] = false;
    });
  };
});

查看

<ion-item ng-repeat="document in filtered = (documents | filter: searchFilter | filter: {category_id: categoryFilter.id}: false | orderBy: sortBy)"  type="item-text-wrap" ng-init="checkDownload(document)">
  <form class="view-form" name="viewForm" method="post" ng-submit="openLink(document, user)" ng-if="file[document.id] == false">
    <button type="submit"><img class="document-image" image-lazy-src="{{::url + document.thumbnail }}" alt="" image-lazy-loader="ios"/></button>
  </form>
  <form class="view-form" name="viewForm" method="post" ng-submit="openPath(document, user)" ng-if="file[document.id] == true">
    <button type="submit"><img class="document-image" image-lazy-src="{{::url + document.thumbnail }}" alt="" image-lazy-loader="ios"/></button>
  </form>
  <div class="document-title" ng-if="document.title.length <= 25">{{::document.title}} <span class="document-size">({{::document.size | filesize:2}})</span></div>
  <div class="document-title" ng-if="document.title.length > 25">{{::document.title | limitTo: 25}} ...<span class="document-size"> ({{::document.size | filesize:2}})</span></div>
  <div class="document-functions">
    <form name="downloadForm" method="post" ng-submit="download(document)">
      <button class="buttons button-document-save" ng-if="file[document.id] == false">Save</button>
    </form>
    <form name="sendForm" method="post" ng-submit="send(document, user, data)">
      <button class="buttons button-document-send">Email file</button>
    </form>
  </div>
</ion-item>

Ionic app中的ng-if =“check（document）”功能

1 个答案: