Angular ngRepeat-HTML更改后更新

Question

我有一个似乎无法解决的问题。

我有一个简单的角度重复设置，可以输出一些幻灯片。 可以更改不同的幻灯片组。 我正在使用适用于滑块的jQuery插件，效果很好。

问题是，当我运行jQuery滑块插件时，它当然会更改html结构。 因此，当我在控制器范围内更改幻灯片时，角度不会删除旧幻灯片。

我在这里有一个工作示例：

http://jsfiddle.net/antony_publica/ccvjz4au/

要进行测试，请滚动浏览幻灯片，依次为1、2、3、4。单击清单2。现在，滚动浏览时，您会看到幻灯片1至8。幻灯片应为5至8。

HTML

<div ng-controller="MyCtrl">
  Listing Id: {{current_listing.id}}
  <div class="image_slider col-md-9" ng-if="current_listing">
    <div class="slide slick-slide" ng-repeat="slide in current_listing.slides" repeat-end="initSlider()" >
      {{slide}}
    </div>
  </div>
  <button ng-click="current_listing = listing">Listing 1</button>
  <button ng-click="current_listing = listing2">Listing 2</button>
</div>

JS

var myApp = angular.module('myApp',[]);

myApp.directive("repeatEnd", function(){
  return {
    restrict: "A",
    link: function (scope, element, attrs) {
      if (scope.$last) {
        setTimeout(function(){
          scope.$eval(attrs.repeatEnd);
        }, 50);
      }
    }
  };
});


function MyCtrl($scope) {
    $scope.listing = {
        id: 1,
        slides: ['Slide 1','Slide 2','Slide 3', 'Slide 4']
    };
    $scope.listing2 = {
        id: 2,
        slides: ['Slide 5','Slide 6','Slide 7', 'Slide 8']
    };
    $scope.current_listing =$scope.listing;
    $scope.initSlider = function(){
        if($('.image_slider').hasClass('slick-slider')){
        $('.image_slider').slick('unslick');
      }
      $('.image_slider').slick();
    }
}

Answer 1

我在指令内创建了一个分页脚本，该脚本仅显示current_listing.slides对象属性值中包含的幻灯片。 我从html中删除了ng-repeat指令，因为每次您单击列表按钮时，它都会向dom中添加四张幻灯片。 我还从您的html中移走了{{ scope variable here }}代码，并将变量放置在ng-bind指令中，以便在进行角度编译之前不会在屏幕上显示括号。 我还向您的列表按钮添加了ng-click指令，该指令将整数值传递给设置current_listing值的控制器。

实时示例： http ： //codepen.io/larryjoelane/pen/ZWzObo

HTML：

<div ng-app="myApp" ng-controller="MyCtrl">
  Listing Id: <span ng-bind="current_listing.id"></span>

  <div repeat-end class="image_slider col-md-9">
    <div ng-bind="slides" class="slick">
    </div>
  </div>
  <button ng-click="changeListing(1)">Listing 1</button>
  <button ng-click="changeListing(2)">Listing 2</button>
</div>

角/ JQuery的：

(function($) {

  var myApp = angular.module('myApp', []);

  myApp.directive("repeatEnd", function($timeout) {
    return {
      restrict: "A",
      link: function(scope, element, attrs) { //begin link

          //let angular compile first then call the jquery code
          $timeout(function() { //begin timeout

            function buildSlides() {

              //array to hold the slides
              var slides = [];

              //loop through and the opening and closing div tags to the slides
              for (var i = 0; i < scope.current_listing.slides.length; i++) { //begin for

                //add the slide
                slides.push("<div>" + scope.current_listing.slides[i] + "</div>");

              } //end for

              //return the slides html
              return slides.join("");

            } //end function          

            //initalize slick slider
            $(element).slick(scope.$eval());

            //check for changes in the listing
            scope.$watch('current_listing', function(newValue, oldValue) { //begin watch

              //if there is a new value
              if (newValue) {

                //destroy the slick slider
                $(element).slick("unslick");

                //store the html
                var content = buildSlides();

                //populate the slides
                scope.slides = scope.$eval(element.html(content));

                //reinitalize slick slider 
                $(element).slick();

              }
            }); //end watch

          }); //end timeout

        } //end link

    };
  });

  myApp.controller("MyCtrl", ["$scope", "$timeout", function($scope, $timeout) {

    $scope.listing = {
      id: 1,
      slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4']
    };

    $scope.listing2 = {
      id: 2,
      slides: ['Slide 5', 'Slide 6', 'Slide 7', 'Slide 8']
    };

    //intialize the listing
    $scope.current_listing = $scope.listing;

    //change the listing on click
    $scope.changeListing = function(listNum) { //begin function

        //Assign the listings based on the listNum
        //passed in as a parameter.

        if (listNum === 1) {
          $scope.current_listing = $scope.listing;
        } else if (listNum === 2) {
          $scope.current_listing = $scope.listing2;
        }

      } //end function

  }]);

})(jQuery);