angular-slick transclude 在动态 ng-repeat 中不起作用
angular-slick transclude not working in dynamic ng-repeat
我有以下使用 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 事件滑动时,检测到新值,但第二轮转盘未根据新数组更新
感谢任何帮助谢谢
我找不到解决方案,所以我改变了方法让它工作。
我结合了 slick 和 flexi sider 来实现我想要的东西。
Slick 加载第一个滑块,afterChange 函数触发事件并创建用于 ng-repeat 的新数组,每次在第一个滑块中滑动时,flexi 都会生成新的滑块。
谢谢
我有以下使用 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 事件滑动时,检测到新值,但第二轮转盘未根据新数组更新
感谢任何帮助谢谢
我找不到解决方案,所以我改变了方法让它工作。
我结合了 slick 和 flexi sider 来实现我想要的东西。
Slick 加载第一个滑块,afterChange 函数触发事件并创建用于 ng-repeat 的新数组,每次在第一个滑块中滑动时,flexi 都会生成新的滑块。
谢谢