javascript - Angular 平滑嵌入在动态 ng-repeat 中不起作用

标签 javascript jquery angularjs slick.js

我有下面使用 Angular-slick 的代码。在第一个光滑的轮播上滑动时,fevt 不断变化。

<slick  slides-to-scroll="1" arrows="false" current-index="slick.current"  class="first-slide"  on-after-change="slick.onAfterChange(this)">
    <div ng-repeat="s in evt">
    </div>
</slick>

<slick  slides-to-scroll="{{numtoslide}}"  init-onload=true data="fevt" arrows="false" variable-width="true" center-padding="60px" center-mode="false">
    <div ng-repeat="t in fevt" ng-if="t.section != 'venues'" style="width:320px;margin-right:5px;" >
   </div>
</slick>

about.js

$scope.slick = { current:0, init : function(){}, goto : function(index)   {this.current = index}, next : function(index){return this.current++}, prev : function(index){this.current--}, onBeforeChange : function(){}, onAfterChange : function(){} }

$scope.slick.onAfterChange = function(e){   
    $scope.fevt = [];
    for(var j=0; j< $localStorage.eventlist[0].items.length; j++){
        if($localStorage.eventlist[0].items[j].related_venue == $scope.test){
            $scope.fevt.push($localStorage.eventlist[0].items[j]);
        }
    }       
    $scope.$apply();                    
}

slick.js

if (scope.initOnload) {
    isInitialized = false;
    return scope.$watch('data', function (newVal, oldVal) {
        if (newVal != null) {
            return $transclude(function (clone, scope) {
                var compiled;
                if (isInitialized) {
                    destroySlick();
                }
            compiled = $compile(clone)(scope);
            element.append(compiled);

            initializeSlick();
            return isInitialized = true;
        });
    }else{
        isInitialized = false;
        initializeSlick();
    }
});
} else {
    return $transclude(function (clone, scope) {
        var compiled;
        compiled = $compile(clone)(scope);
        element.append(compiled);
        return initializeSlick();
    });
}

当使用 afterchange 事件滑动时,检测到 newval,但第二个轮播不会根据新数组进行更新

感谢任何帮助,谢谢

最佳答案

我找不到解决方案,所以我改变了方法来使其工作。

我结合了 slick 和 flexi sider 来实现我想要的东西。

Slick 加载第一个 slider ,afterChange 函数触发事件并创建用于 ng-repeat 的新数组,每次第一个 slider 滑动时,flexi 都会生成新的 slider 。

谢谢

关于javascript - Angular 平滑嵌入在动态 ng-repeat 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31108573/

相关文章:

javascript - 使用 bootstrap modal 通过 jquery 验证加载不同的内容

javascript - rails 5 : hide navigation drop-down on click

javascript - 当服务器未按照请求的顺序返回数据时,在 Angular 中键入时进行搜索以显示准确的结果?

javascript - react-router-dom NavLink isActive 效果不佳

php - 在 WordPress 小部件管理页面中获取未知数量的选项

javascript - jquery .one() 加载和错误事件不起作用

c# - 如何将 sql 表中的多列分配给 List<> 中的单列

javascript - 延迟()或停止()超时?

javascript - 通过 CDN 包含 Streams 模块

AngularJS - 如何在不提交表单的情况下使用 ng-click?