Я пытаюсь сделать директиву из Совы Каруселя в угловом использовании ng-repeat. Я работаю в его нынешнем виде. Тем не менее, я хочу, чтобы это произошло, когда базовый массив изменился, я хочу, чтобы карусель соответствующим образом отражала эти изменения. Поэтому, если я добавляю или удаляю элементы из массива, карусель должен автоматически добавлять или удалять эти элементы.
Однако, что происходит, когда данные базового массива меняются, ng-repeat запускает и создает контейнеры div, а карусель исчезает.
Здесь код
main.html
<working-team team-members="vm.teamMembers"></working-team>
Рабочие-team.js
angular
.module('dashboardApp')
.directive('workingTeam', workingTeam)
.directive('workingTeamMember', workingTeamMember)
workingTeam.$inject = [];
function workingTeam()
{
return {
restrict:'E',
templateUrl: 'scripts/dashboard_module/widgets/working-team/working-team.html',
link: link,
scope: {
teamMembers: '='
}
};
function link(scope,elem,attrs,ngModel)
{
scope.teamMembers;
scope.initCarousel = init;
function init(element)
{
var options = {
autoPlay: 5000,
items: 4,
slideSpeed : 300,
paginationSpeed : 300,
rewindSpeed : 200,
};
angular.element(elem).owlCarousel(options);
}
scope.$watch('teamMembers',function(data){
scope.teamMembers = data;
},true);
}
}
workingTeamMember.$inject = [];
function workingTeamMember()
{
return {
restrict: 'A',
transclude: false,
link:link
}
function link(scope, elem)
{
if(scope.$last && scope.teamMembers !== undefined){
scope.initCarousel(elem.parent());
}
}
}
рабочий team.html
<div working-team-member ng-repeat="member in teamMembers" class="p-5">
<div class="img-circle size-125x125 text-center pt-30 bg-default lter">
<i class="fa fa-user fa-5x fa-lg text-default"></i>
</div>
<h3>
<strong>{{ member.user.first_name }}</strong>
</h3>
</div>
Любые предложения о том, как справиться с этим? Я работаю над ним около 5 часов, и я не добился большого прогресса.
Примерно через 15 часов, пытаясь добраться до корня этой проблемы, я, наконец, понял это. Было 2 вещи, которые мешали этому работать, - я объясню это более подробно ниже.
Вот как выглядит окончательное решение:
main.html
<working-team team-members="vm.teamMembers"></working-team>
workingTeam.js
angular
.module('dashboardApp')
.directive('workingTeam', workingTeam)
.directive('workingTeamMember', workingTeamMember)
workingTeam.$inject = [];
function workingTeam()
{
return {
restrict:'E',
templateUrl: 'scripts/dashboard_module/widgets/working-team/working-team.html',
link: link,
transclude: false,
scope: {
teamMembers: '='
}
};
function link(scope,elem,attrs,ngModel)
{
scope.team = scope.teamMembers;
scope.initCarousel = initCarousel;
var options = {
autoPlay: 5000,
items: 4,
slideSpeed : 300,
paginationSpeed : 300,
rewindSpeed : 200,
};
var owl = angular.element(elem);
var owldata;
var currentLength;
function initCarousel()
{
owldata = owl.data('owlCarousel');
if(owldata === undefined){
init();
}else{
reinit();
}
}
function init()
{
owl.owlCarousel(options);
}
function reinit()
{
owldata.destroy();
owl.owlCarousel(options);
}
scope.$watch('teamMembers',function(newTeam, oldTeam){
if(newTeam !== oldTeam){
if(oldTeam !== undefined && oldTeam.length > 0){
currentLength = oldTeam.length;
}
scope.team = newTeam;
}
},true);
}
}
workingTeamMember.$inject = [];
function workingTeamMember()
{
return {
restrict: 'A',
transclude: false,
link:link
}
function link(scope, elem)
{
if(scope.$last){
scope.initCarousel();
}
}
}
рабочий team.html
<div ng-repeat="member in team" class="p-5">
<div class="img-circle size-125x125 text-center pt-30 bg-default lter" working-team-member >
<i class="fa fa-user fa-5x fa-lg text-default"></i>
</div>
<h3>
<strong>{{ member.user.first_name }}</strong>
</h3>
</div>
Первая проблема заключается в том, что после инициализации карусели вам нужно либо использовать методы добавления/удаления элемента, связанные с объектом, либо в моем случае, так как я пытался обновить весь объект в результате обновления ng-repeat, вы должны уничтожить карусель, а затем повторно инициализировать его новым массивом данных.
Как только я понял это, он отлично поработал, и он будет обновлять в любое время массив, который он должен был изменить. Однако была и другая проблема, с которой я столкнулся - было много артефактов, которые остались бы от предыдущего массива. Вещи, начиная от случайных оберток div со странными классами до нечетной угловой разметки.
Через пару часов я смог придумать исправление. Я уверен, что это результат jquery и угловатости, которые не играют хорошо вместе, но здесь. Оказывается, что когда угловой запуск "ng-repeat", он удаляет элементы из отображения в DOM, но когда jquery просматривал элемент, чтобы получить детей, он не различал элементы, которые имели были удалены угловыми, а какие - нет - он схватил все.
Таким образом, я смог быстро исправить, изменив исходный код кавычки совы на следующее:
Я не большой поклонник jquery, и я уверен, что есть гораздо более "угловатый" подход к этому, но, потратив так много времени, пытаясь решить эту проблему, это будет работать пока.