AngularJS模型绑定或ng-repeat完成时的事件？

Question

我们有一个大型模型，需要花费几秒钟才能将模型中的所有项绑定到表单上。我们希望在这个过程中显示一个旋转图标（spinner）。是否有一些事件会在绑定完成时触发，以便我们知道何时隐藏旋转图标？

- adam0101

---

这是你需要的吗？我没有标记为重复，因为我对 Angular 不够了解，但希望这对你有所帮助。 - Ricky Mutschlechner

我不是AngularJS专家，但绑定应该是同步操作。在调用之前显示旋转器，在调用之后隐藏它：无需使用回调函数。 - Saturnix

Answer 1

Plunkr: http://plnkr.co/edit/GzzTW4?p=preview

如果您使用的是版本1.2，请在旋转图标上使用ng-if，否则请使用ng-show。

<div ng-controller="Ctrl">
    <div ng-show="complete">Complete={{complete}}</div>
    <div class="thing" ng-repeat="thing in things" my-post-repeat-directive>
       thing {{thing}}
   </div>
</div>

在您的指令中使用 $last 来判断渲染是否完成，然后更改您在 ng-show/ng-if 中定义的变量。

function Ctrl($scope) {
  $scope.complete=false;  
  $scope.doComplete = function() {
      $scope.complete = true;
  }

  $scope.things = [
    'A', 'B', 'C'
  ];
}

angular.module('myApp', [])
  .directive('myPostRepeatDirective', function() {
    return function(scope, element, attrs) {
      if (scope.$last) {
        scope.$eval('doComplete()');
      }
    };
  });

- Nathaniel Johnson

Answer 2

在那种情况下，我使用与 Angular UI 路由（如果您使用 UI 路由）一起触发的 $viewContentLoaded 事件混合的 $timeout 服务：

关于 $timeout：

此服务只是 $timeout 服务的简单装饰器，添加了 "flush" 和 "verifyNoPendingTasks" 方法。

关于 $viewContentLoaded：

在视图加载后、DOM 渲染完成后触发。视图的 '$scope' 发出该事件。

我的个人用例是为 paymentForm 动态生成其隐藏输入（使用通过 ng-bind-html 插入的服务器端计算的 HTML 数据），并提交到支付网关：

$scope.$on('$viewContentLoaded', function() { 
    $timeout(function () {
        $scope.paymentForm.submit();
    });
});

以上代码示例中，.submit() 是一个自定义指令中的函数，用于与表单一起使用以实现自动提交表单。 FYI。

朱利安

- Julien L

Answer 3

您可以观察$last项的编译/链接函数，并向作用域触发自定义事件。

- doodeec

Answer 4

通常我会在视图中创建一个带有ng-show="submitting"的旋转器div。然后当数据加载完成时，您可以将$scope.submitting设置为“false”，这样旋转器就会隐藏起来。

<!-- In your HTML -->
<div class="spinner" ng-show="submitting">
<div ng-repeat="p in people">
   {{p.name}}
</div>

//In Javascript
$scope.submitting = true;
$scope.load_data = function(){
    $http.get('/api/route')
        .then(function(success){
            $scope.submitting = false;
        },function(error){
            console.log(error);
        });
}

希望这能有所帮助。

- mylescc

---

我认为问题不在于在服务调用期间显示旋转器，而是在处理大型ng-repeat数组期间。 - Nathaniel Johnson