Как привязать угловую директиву с помощью ng-repeat к Owl Carousel

Question

Как привязать угловую директиву с помощью ng-repeat к Owl Carousel

0

Я пытаюсь сделать директиву из Совы Каруселя в угловом использовании 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 часов, и я не добился большого прогресса.

Jonathan 30 июнь 2015, в 05:43

Источник

Теги:

javascript

angularjs

owl-carousel

1 ответ

Ещё вопросы

Jonathan · Answer 1 · 2015-06-30T14-39-00.000Z

Примерно через 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, и я уверен, что есть гораздо более "угловатый" подход к этому, но, потратив так много времени, пытаясь решить эту проблему, это будет работать пока.