如何將ng-repeat的angular指令綁定到Owl Carousel

Question

我正在嘗試使用ng-repeat從Owl Carousel角度制作一個指令。 我以它的當前形式工作。 但是，我想發生的是當基本數組發生更改時，我希望輪播能夠相應地反映這些更改。 因此，如果我從陣列中添加或刪除項目，則輪播會自動添加或刪除這些項目。

但是，實際上發生的情況是，當基礎數組數據發生更改，ng-repeat運行並創建div容器，並且輪播消失時。

這是代碼

main.html

<working-team team-members="vm.teamMembers"></working-team>

working-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());
    }
  }
}

working-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個小時的工作，但進展並不順利。

Answer 1

經過大約15個小時的嘗試來找出問題的根源，我終於弄清楚了。 有兩件事使它無法正常工作-我將在下面詳細解釋。

最終的解決方案如下所示：

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();
    }
  }
}

working-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和angular不能很好地一起玩的結果，但這是正確的。 原來，當angular運行“ ng-repeat”時，它將刪除顯示在DOM中的項目，但是當jquery在元素內部查找以獲取子元素時，它不會區分具有被棱角去除了，哪些沒有被去除-它抓住了一切。

因此，我可以通過將owl carousel源代碼修改為以下內容來快速解決問題：

我不是jquery的忠實擁護者，並且我敢肯定有很多“角度式”的方法可以解決此問題，但是花了很長時間嘗試解決這個問題之后，目前仍然可以使用。