AngularJS событие для когда привязка модели или ng-repeat завершена?

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, смешанную с событием $viewContentLoaded, инициируемым угловым UI-маршрутизатором (если вы используете UI-маршрутизатор):

около $timeout:

Этот сервис представляет собой простой декоратор для службы $ timeout, который добавляет методы flush и verifyNoPendingTasks.

около $viewContentLoaded

срабатывает после загрузки представления, после отображения DOM. '$ Scope' представления генерирует событие.

Мой личный вариант использования - для того, чтобы paymentForm динамически генерировал свои скрытые входные данные (используя вычисленные на стороне сервера данные HTML, которые я вставляю через ng-bind-html) и отправлял в шлюз платежей:

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

К сведению, в приведенном выше примере кода.submit() - это функция из пользовательской директивы, используемой с формой для возможности автоматической отправки формы.

Julien

Answer 4

Для этого я обычно создаю вращающийся div с вашей точки зрения с помощью ng-show="submiting". Затем, когда данные загружены, вы устанавливаете $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);
        });
}

Надеюсь, это поможет