Question

我们有一个大型模型，ng-repeat需要几秒钟才能将模型中的所有项目绑定到表单。我们想展示一个旋转器，而这正在发生。绑定完成时是否会触发某些事件，因此我们知道何时隐藏微调器？

Answer 1

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

在微调器上使用ng-show如果您使用1.2，请使用ng-if

<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 / ngif的变量。

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()');
      }
    };
  });

Answer 2

您可以查看$last项目编译/链接功能，并将自定义事件触发到范围

Answer 3

在这种情况下，我使用$timeout服务与angular ui路由器触发的$viewContentLoaded事件混合（如果你使用ui路由器）：

约$ timeout：

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

关于$ viewContentLoaded

在呈现DOM之后，在加载视图后触发
。视图的“$ scope”会发出事件。

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

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

在上面的代码示例中，.submit（）是与表单一起使用的自定义指令中的函数，以便能够自动提交表单。

于连

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);
        });
}

我希望有帮助

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

4 个答案: