Question

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

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

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

我在这里有一个有效的例子：

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

Angular ngRepeat - HTML更改后更新

1 个答案: