Question

我试图用角度使用ng-repeat从Owl Carousel中制作一个指令。我让它以目前的形式工作。但是，我想要发生的是当基本数组发生变化时，我希望轮播相应地反映这些变化。因此，如果我在数组中添加或删除项目，轮播应该自动添加或删除这些项目。

然而，实际发生的情况是当基本数组数据发生变化时，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个小时，而且我没有取得很大进展。

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

工薪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>

第一个问题是，一旦初始化了轮播，您必须使用与该对象关联的添加/删除项目方法 - 或者在我的情况下，因为我试图刷新整个对象的结果-repeat更新，你必须销毁轮播，然后用新的数据数组重新初始化它。

一旦我弄清楚这一点，它的效果很好，并且它会随时更新它必须更改的数组。但是，我还面临另一个问题 - 从前一个数组中遗留了大量的工件。从带有奇怪类的随机div包装到奇数角度标记的事情。

经过几个小时后，我才得以解决问题。我很确定这是因为jquery和棱角分明没有很好地在一起玩，但是这里有。事实证明，当角度运行＆＃34; ng-repeat＆＃34;时，它会删除在DOM中显示的项目，但是当jquery在元素内部查找以获取子项时，它没有＆＃39;区分已被角度移除的元素和哪些元素没有 - 它抓住了所有东西。

所以，我能够通过将owl carousel源代码修改为以下内容来快速修复：

enter image description here

我不是jquery的忠实粉丝，而且我确信它还有更多的角色和＃34;解决这个问题的方法，但是在花了这么长时间试图解决这个问题后，现在就可以使用了。

如何将angular指令与ng-repeat绑定到Owl Carousel

1 个答案: