Я пытаюсь динамически добавить элемент в список jquery mobile. Я добавляю элемент с помощью события ngClick и показываю список с помощью ngRepeat. Я вызвал обновление списка, но последний элемент не может быть правильно оформлен. Какое событие следует использовать для правильного обновления? Спасибо.
$scope.addItem = function () {
$scope.userList.push($scope.userInputText);
$scope.userInputText = null;
$("#listview1").listview("refresh");
}
Следующая директива работает для меня. Просто добавьте list-view в свой тег ul, а также data-watch="userList", чтобы указать angular, какой объект отслеживать для изменений.
<ul list-view data-watch="userList" data-role="listview" data-filter="true" >
<li ng-repeat="user in userList">{{user.name}}</li>
</ul>
app.directive('listView', function () {
var link=function(scope, element, attrs) {
$(element).listview();
scope.$watchCollection(attrs.watch, function() {
$(element).listview("refresh");
});
};
return {
restrict: 'EA',
scope:false,
link: link
};
});
Это происходит потому, что и пользовательский интерфейс JQuery, и Angular пытаются обновить DOM, используя событие готовности документа. Возникает состояние гонки, при котором Angular добавляет новые данные после того, как JQuery уже создал список. Решение Sheetal работает, потому что оно заставляет JQuery модифицировать DOM и создавать список после Angular заполнения данных.
Другим решением является инструмент под названием адаптер jquery для мобильных устройств.
