повторить анимацию полный обратный вызов
0
Итак, у меня есть простой ng-repeat с анимацией ввода, определенной в javascript.
Песочница: http://codepen.io/anri82/pen/KwgGeY
код:
<div ng-app="myApp" ng-controller="MyController">
{{state}}
<ul>
<li class="repeat-animate" ng-repeat="item in list">{{item}}</li>
</ul>
<button ng-click="add()">add</button>
</div>
angular.module('myApp', ['ngAnimate'])
.controller("MyController", function($scope) {
$scope.state ="idle";
$scope.id=3;
$scope.list = [1,2];
$scope.add = function () {
$scope.state="pushing";
$scope.list.push($scope.id++);
$scope.state="done pushing";
};
}).animation('.repeat-animate', function () {
return {
enter: function (element, done) {
element.hide().show(2000, done);
}
};
});
Как переключить $scope.state в done pushing только после завершения анимации? Ответ должен быть в angular, не предлагайте setTimeout.
1 ответ
2
Лучший ответ
С помощью подхода javascript-анимации, который вы делаете, вам нужно овладеть областью текущего элемента в обработанном анимацией обратном вызове. Поскольку после обновления переменной вне контекста angular вам нужно вручную вызвать цикл дайджеста, выполнив $scope.$apply() (или используйте $timeout, scope.$evalAsync и т.д.). А также, поскольку ng-repeat создает дочернюю область, область элемента фактически имеет унаследованное свойство state из области родительского контроллера, поэтому для того, чтобы обновление получило отражение в родительской области, используйте объект для обертывания state, так что оба дочерних объекта и родительского объекта имеют одну и ту же ссылку на объект.
angular.module('myApp', ['ngAnimate'])
.controller("MyController", function($scope) {
$scope.push = {state: "idle" };
$scope.id=3;
$scope.list = [1,2];
$scope.add = function () {
$scope.push.state="pushing";
$scope.list.push($scope.id++);
};
}).animation('.repeat-animate', function () {
return {
enter: function (element, done) {
element.hide().show(2000, function(){
var scope = element.scope(); //Get the scope
scope.$evalAsync(function(){ //Push it to async queue
scope.push.state="done pushing"
});
});
}
};
});
PSL
Поделиться
Ещё вопросы
- 0Масштабирование фона SVG
- 0горячий, чтобы получить значение радио кнопки в группе
- 0AngularJS: вложенные директивы - передача данных не работает
- 0Может получить доступ к Joomla через IP, но не через домен (Внимание: ошибка require_once)
- 0Использование printf для печати символов, когда у меня есть только пустой указатель на данные
- 0Angularjs проблема $ http.get не работает
- 0Как я могу сгруппировать вывод из моего MySQL Query, я хочу суммировать вывод equipCost по ID. т.е. я хочу, чтобы аккаунт стоил SUM'd для их аккаунта
- 0MSQL DDL от JDL - Jhipster
- 1Очевидное загрязнение несколькими прокси-объектами для одной цели
- 0N Queen с использованием C ++ и возврат с помощью динамического 2D-массива
- 1Как передать идентификатор cron как arg в методе, который вызывает cron
- 0Как установить объект файла как ngModel, используя $ setViewValue (file)
- 0MySQL генерирует годовые отчеты по месяцам с указанием имени персонала
- 0Как написать поисковый запрос в MySQL, который сопоставляет столбцы из разных таблиц и возвращает другой столбец из первой таблицы?
- 1Получить адрес отправителя SMTP из нового открытого почтового инспектора Outlook с C # (VSTO или погашение), когда настроено несколько учетных записей
- 0Google Map API не загружается, когда скрипт на той же HTML-странице
- 0показ дополнительной строки при чтении файла в c ++ с использованием fstream
- 0Ошибка: недопустимое значение для атрибута <text> x = «NaN» в angularJS nvd3-multi-bar-chart
- 0jquery / Regex, остановка событий
- 0вопрос кнопки возврата в Chrome
- 0Воспроизведение видео HTML5 внутри рамки изображения iPhone
- 1PySpark - создать столбец на основе имен столбцов, указанных в другом столбце
- 0Не можете получить значение из класса в C ++?
- 1Как создать потокобезопасный настраиваемый HTML-результат в Testng
- 1Array.reduce короткого замыкания в Javascript
- 0Достаточно ли большого дома для ша1?
- 0quickfix bad_cast исключение с взломанным login_message
- 0Увеличьте загрузку ЦП более чем на 100% в XCODE 5
- 0CSS - плавающая проблема для адаптивного дизайна
- 0очистка setInterval в плагине onScreen для изменения класса в окне просмотра
- 0Попытка удалить вложенный объект в мангусте
- 1Не удается запустить службу SQLBrowser на компьютере '.'
- 0Директива AngularJS - Как я могу сказать, что выражение атрибута полностью оценено?
- 0несколько флажков с php в таблице
- 0Присвойте значение текстовому окну gridview, используя jquery
- 1Расчет площади руки с использованием данных о глубине
- 0PHP перенаправить с if, if else и else
- 1Plotly Python: выравнивание осей X на сгруппированной гистограмме с несколькими осями Y
- 1Запустите скрипт на удаленном компьютере без преобладания sudo
- 1double.ToString («G»), но всегда включать точку?
- 0Есть ли чистый способ отключить управление RX от USBCore в leonardo?
- 1Переносить / копировать значение NaN в другой столбец DF Pandas
- 1Сохранение подкласса как типа суперкласса и использование его методов в Java
- 0Проблема с запросом MySQL - сопоставление нескольких идентификаторов в объединенной таблице
- 0JQuery Как процитировать динамическую строку
- 1Всплывающее окно над экраном вызова в версии Android 7.0
- 1как ссылаться на дочерний элемент на клонированном элементе
- 0Загрузка изображений напрямую с сервера
- 0Оставил соединение, мне нужно объяснение о коде
- 0Список инициализации C ++ игнорирует вызов конструктора родительского класса
"done pushing"scope.$evalAsync"done pushing"вscope.$evalAsync, что ничем не отличается от выполненияscope.push.state="done pushing"; scope.$evalAsync();