重新初始化Angular-slick指令

时间:2016-05-19 19:25:54

标签: angularjs slider

我正在使用Angular-slick指令,我遇到了一些问题。我确信其他人可能遇到过类似的问题,但我希望有人可以帮助我解决这个问题。

所以我的页面上有一系列角度指令。每个指令都具有可以设置的属性,以便过滤其他指令中的数据。我的Angular-slick指令绑定到来自Web API调用的数据。在第一次加载时,该指令是完美的,它工作正常。但是,一旦来自其他指令之一的动作导致Angular-slick指令过滤其数据(这只是另一个返回与初始加载类似的数据的Web API调用),整个滑块变得古怪且乱序。所有幻灯片都是垂直显示的。

以下是模板中的代码:

<div id="slickContainer" ng-show="ctlr.SectionDataAvailable">
                <div id="slickSlider">
                    <div id="currentDateRange">
                        <span ng-bind="ctlr.ApiResult.CurrentDateRangeHeaderText"></span>
                    </div>

                    <div id="previousDateRange">
                        <span ng-bind="ctlr.ApiResult.PreviousDateRangeHeaderText"></span>
                    </div>

                    <div id="slick">
                        <slick init-onload="false"
                               data="ctlr.DataLoaded"
                               arrows="true"
                               slides-to-show="3"
                               slides-to-scroll="3"
                               infinite="false"
                               dots="false"
                               responsive="ctlr.SlickResponsive()">
                            <div ng-repeat="doubledUpResult in ctlr.ApiResult.DoubledUpResults" id="slickConatiner">

                                <!--Current Item-->
                                <div id="currentItemContainer">

                                    <div class="creative-item-heading-container"
                                         ng-show="doubledUpResult.CurrentItem.HasACreative">
                                        <span>{{doubledUpResult.CurrentItem.Headline}}</span><br />
                                        <div ng-show="doubledUpResult.CurrentItem.IsFirstOccurrenceVisible">
                                            <span style="color: #dd4f04;">First Occurrence: </span>
                                            <span>{{doubledUpResult.CurrentItem.FirstPropertyName}}</span>
                                            <span>{{doubledUpResult.CurrentItem.FirstCreativeDateText}}</span>
                                        </div>
                                        <div ng-show="doubledUpResult.CurrentItem.IsLastOccurrenceVisible">
                                            <span style="color: #dd4f04;">Last Occurrence: </span>
                                            <span>{{doubledUpResult.CurrentItem.LastPropertyName}}</span>
                                            <span>{{doubledUpResult.CurrentItem.LastCreativeDateText}}</span>
                                        </div>
                                        <div ng-show="doubledUpResult.CurrentItem.HasACreative">
                                            <span style="color: #dd4f04;">Total: </span>
                                            <span>
                                                {{doubledUpResult.CurrentItem.ActivityTotalText}}{{doubledUpResult.CurrentItem.ActivityFootnoteIndicator}}
                                            </span>
                                        </div>
                                        <div ng-show="doubledUpResult.CurrentItem.IsAdvertiserVisible">
                                            <span style="color: #dd4f04;">{{doubledUpResult.CurrentItem.EntityTypeDescription}}:</span>
                                            <span>
                                                <a ng-click="ctlr.OnEntityLinkClicked(doubledUpResult.CurrentItem)">
                                                    {{doubledUpResult.CurrentItem.EntityName}}
                                                </a>
                                            </span>
                                            <span>{{doubledUpResult.CurrentItem.ExtraAdvertiserNote}}</span>
                                        </div>
                                    </div>
                                    <div class="creative-thumbnail"
                                         ng-show="doubledUpResult.CurrentItem.HasACreative">
                                        <kmi-crv-thumbnail creative-id="doubledUpResult.CurrentItem.CreativeIdStr"
                                                           creative-type="doubledUpResult.CurrentItem.CreativeType"
                                                           size="ctlr.ThumbnailSize"
                                                           storage-provider="ctlr.StorageProvider"
                                                           base-path="'/KMI/IntelliDrive/ApplUI'"
                                                           style="margin: 0 auto; cursor:pointer;"
                                                           ng-click="ctlr.OnCreativeClicked(doubledUpResult.CurrentItem)"
                                                           is-delayed="'true'"></kmi-crv-thumbnail>
                                    </div>
                                    <div class="creative-item-button-container"
                                         ng-show="doubledUpResult.CurrentItem.HasACreative">

                                        <a ng-click="ctlr.OnCreativeClicked(doubledUpResult.CurrentItem)"
                                           class="top-creatives-button current-item"
                                           ng-show="doubledUpResult.CurrentItem.IsQuickViewVisible"
                                           ng-style="ctlr.GetStyle(doubledUpResult.CurrentItem, 'QuickView')">Quick View</a>

                                        <a ng-click="ctlr.OnViewInLibraryClicked(doubledUpResult.CurrentItem)"
                                           class="top-creatives-button current-item"
                                           ng-show="doubledUpResult.CurrentItem.CanViewInLibrary"
                                           ng-style="ctlr.GetStyle(doubledUpResult.CurrentItem, 'ViewInLibrary')">View in Library</a>

                                        <a ng-click="ctlr.OnAddToCartClicked(doubledUpResult.CurrentItem)"
                                           class="top-creatives-button current-item"
                                           ng-show="doubledUpResult.CurrentItem.CanAddToShoppingCart"
                                           ng-style="ctlr.GetStyle(doubledUpResult.CurrentItem, 'AddToCart')">Add to Cart</a>

                                    </div>

                                </div>

                                <!--Previous Item-->
                                <div id="previousItemContainer">

                                    <div class="creative-item-heading-container"
                                         ng-show="doubledUpResult.PreviousItem.HasACreative">
                                        <span>{{doubledUpResult.PreviousItem.Headline}}</span><br />
                                        <div ng-show="doubledUpResult.PreviousItem.IsFirstOccurrenceVisible">
                                            <span style="color: #dd4f04;">First Occurrence: </span>
                                            <span>{{doubledUpResult.PreviousItem.FirstPropertyName}}</span>
                                            <span>{{doubledUpResult.PreviousItem.FirstCreativeDateText}}</span>
                                        </div>
                                        <div ng-show="doubledUpResult.PreviousItem.IsLastOccurrenceVisible">
                                            <span style="color: #dd4f04;">Last Occurrence: </span>
                                            <span>{{doubledUpResult.PreviousItem.LastPropertyName}}</span>
                                            <span>{{doubledUpResult.PreviousItem.LastCreativeDateText}}</span>
                                        </div>
                                        <div ng-show="doubledUpResult.PreviousItem.HasACreative">
                                            <span style="color: #dd4f04;">Total: </span>
                                            <span>
                                                {{doubledUpResult.PreviousItem.ActivityTotalText}}{{doubledUpResult.PreviousItem.ActivityFootnoteIndicator}}
                                            </span>
                                        </div>
                                        <div ng-show="doubledUpResult.PreviousItem.IsAdvertiserVisible">
                                            <span style="color: #dd4f04;">{{doubledUpResult.PreviousItem.EntityTypeDescription}}:</span>
                                            <span>
                                                <a ng-click="ctlr.OnEntityLinkClicked(doubledUpResult.PreviousItem)">
                                                    {{doubledUpResult.PreviousItem.EntityName}}
                                                </a>
                                            </span>
                                            <span>{{doubledUpResult.PreviousItem.ExtraAdvertiserNote}}</span>
                                        </div>
                                    </div>
                                    <div class="creative-thumbnail"
                                         ng-show="doubledUpResult.PreviousItem.HasACreative">
                                        <kmi-crv-thumbnail creative-id="doubledUpResult.PreviousItem.CreativeIdStr"
                                                           creative-type="doubledUpResult.PreviousItem.CreativeType"
                                                           size="ctlr.ThumbnailSize"
                                                           storage-provider="ctlr.StorageProvider"
                                                           base-path="'/KMI/IntelliDrive/ApplUI'"
                                                           ng-click="ctlr.OnCreativeClicked(doubledUpResult.PreviousItem)"
                                                           style="margin: 0 auto; cursor:pointer;"
                                                           is-delayed="'true'"></kmi-crv-thumbnail>
                                    </div>
                                    <div class="creative-item-button-container"
                                         ng-show="doubledUpResult.PreviousItem.HasACreative">

                                        <a ng-click="ctlr.OnCreativeClicked(doubledUpResult.PreviousItem)"
                                           class="top-creatives-button previous-item"
                                           ng-show="doubledUpResult.PreviousItem.IsQuickViewVisible"
                                           ng-style="ctlr.GetStyle(doubledUpResult.PreviousItem, 'QuickView')">Quick View</a>

                                        <a ng-click="ctlr.OnViewInLibraryClicked(doubledUpResult.PreviousItem)"
                                           class="top-creatives-button previous-item"
                                           ng-show="doubledUpResult.PreviousItem.CanViewInLibrary"
                                           ng-style="ctlr.GetStyle(doubledUpResult.PreviousItem, 'ViewInLibrary')">View in Library</a>

                                        <a ng-click="ctlr.OnAddToCartClicked(doubledUpResult.PreviousItem)"
                                           class="top-creatives-button previous-item"
                                           ng-show="doubledUpResult.PreviousItem.CanAddToShoppingCart"
                                           ng-style="ctlr.GetStyle(doubledUpResult.PreviousItem, 'AddToCart')">Add to Cart</a>
                                    </div>

                                </div>
                            </div>
                        </slick>
                    </div>
                </div>
            </div>

当触发来自另一个指令的操作时,我想要做的就是进行Web API调用,这会返回一个新的数据集,然后滑块会被反弹。我的问题是我无法弄清楚如何在不破坏滑块的情况下进行重新绑定。

感谢。

0 个答案:

没有答案