Question

我创建了一个指令：

.directive('repeatDone', function() {
  return function(scope, element, attrs) {
    if (scope.$last) {
      scope.$eval(attrs.repeatDone);
    }
  }
})

在从Firebase下载列表并在屏幕上呈现时显示微调器：

<tr ng-repeat="task in tasks | filter:user.uid" class="item-unchecked" repeat-done="layoutDone()" ng-cloak>

一旦加载列表中的最后一项（即当加载设置为false时），微调器就会消失：

$scope.loading = true;
  $scope.layoutDone = function() {
    $timeout(function() {
      $scope.loading = false;
    }, 0);
  };

现在，这不包括列表为空的情况（即任何时候我创建一个新的（空）列表。如何将此特定场景添加到条件if (scope.$last)？

我已经尝试过：

if (!scope || scope.$last)
if (!scope.length || scope.$last)
if (scope === [] || scope.$last)

没有成功。

感谢您的帮助！

Answer 1

这是一个解决方案 - Plunker。

JS

app = angular.module("app", []);

app.controller("ctrl", ['$scope', '$timeout', function($scope, $timeout) {
  $scope.tasks = [{id: 0}, {id: 1}, {id: 2}, {id: 3}, {id: 4}];

  $scope.loading = true;

  $scope.layoutDone = function() {
    $timeout(function() {
      console.log("done");
      $scope.loading = false;
    }, 0);
  };
}]);

app.directive('repeatDone', function() {
  return function(scope, element, attrs) {
    if (scope.$last) {
      scope.$eval(attrs.repeatDone);
    }
  }
})

app.directive('emptyTasks', function() {
  return function(scope, element, attrs) {
    scope.$eval(attrs.emptyTasks);
  }
})

标记

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="ctrl">
    <table>
      <tr ng-repeat="task in tasks track by $index" repeat-done="layoutDone()">
        <td>{{$index}}</td>
      </tr>
    </table>
    <div ng-if="tasks.length===0" empty-tasks="layoutDone()">Hello</div>
  </body>

</html>

如果任务的长度为0，那么想法是有一个调用layoutDone的元素：

<div ng-if="tasks.length===0" empty-tasks="layoutDone()">Hello</div>

ng-if表示每次都创建div，因此调用layoutDone（）。

这样做很奇怪，但它遵循你的想法。 :-)如果任务为空或有一些元素，你可以看到“完成”写入控制台。

Answer 2

你在哪里使用

 $scope.loading = false

添加

&& tasks && tasks.length > 0

所以

<div ng-if="loading && tasks && tasks.length > 0">
I will not show if not loading, if task is null, or if there are no tasks avaiable
</div>

范围时的函数。$ last或＆＃34;空范围＆＃34;

2 个答案: