Angular中的Jquery Flexslider

Question

我们的设计师给了我jquery flexslider来展示我们项目中最近浏览过的项目。我需要在角度js中构建一个最近查看过的产品的滑块，动态地基于提供的flex滑块。在我的系统中，最近查看的项目存储为json对象（不是数组）。

首先flexslider不起作用，这意味着滑动功能在我的角度项目中不起作用。我尝试在线使用angular flex滑块模块，并尝试迭代我的嵌套对象并使用我的数据构建一个滑块。它也不起作用（图片没有显示）。我的设计师让我写下指令，因此整体设计不会有任何问题或任何设计修改。你可以帮我解决一下这个Jquery flex滑块动态部分的内部部分，如下所示

 <<div class="recent_summary clearfix">
                <h2>RECENTLY VIEWED</h2>



                <div class="nav_carousel">
                    <div class="carousel mini_thumb_slider">

                        <ul class="stage_nav">

                          <li ng-repeat="arrObj in recentItems">
                            <div ng-repeat="arrItem in arrObj.timestamp track by $index">
                                <div ng-repeat="(wsitekey,item) in arrItem.sites track by $index">




                                    <div ng-repeat="(prokey,proMd5) in item.add_to_cart track by $index">
                                        <div class="product-image mini">
                                            <div class="p_image_innner">
                                                <img ng-src="{{proMd5.image}}" title="{{proMd5.title}}  by {{item.info.name}}">
                                                <div class="rateit">
                                                    <div class="rateis">
                                                    </div>
                                                </div>
                                                <a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
                                            </div>
                                        </div>
                                        <div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
                                    </div>
                                    <div ng-repeat="(prokey,proMd5) in item.failed_to_add_to_cart track by $index">
                                        <div class="product-image mini">

                                            <div class="p_image_innner">

                                                <img ng-src="{{proMd5.image}}" title="{{proMd5.title}}  by {{item.info.name}}">
                                                <div class="rateit">
                                                    <div class="rateis">
                                                    </div>
                                                </div>
                                                <a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
                                            </div>
                                        </div>
                                        <div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div> 
                                    </div>

                               </div> 

                            </div>
                          </li>

                        </ul>
                    </div>
                </div>
            </div>

角度弯曲滑块尝试解决内部局部

 <div class="recent_summary clearfix">
                <h2>RECENTLY VIEWED</h2>






                <div class="nav_carousel">
                    <div class="carousel mini_thumb_slider">

                        <ul class="stage_nav">

                          <li ng-repeat="arrObj in recentItems">
                            <div ng-repeat="arrItem in arrObj.timestamp track by $index">
                                <div ng-repeat="(wsitekey,item) in arrItem.sites track by $index">






                                     <flex-slider flex-slide="proMd5 in item.add_to_cart track by $index">
                                      <li>
                                      <div class="product-image mini">
                                            <div class="p_image_innner">
                                                <img ng-src="{{proMd5.image}}" title="{{proMd5.title}}  by {{item.info.name}}">
                                                <div class="rateit">
                                                    <div class="rateis">
                                                    </div>
                                                </div>
                                                <a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
                                            </div>
                                        </div>
                                        <div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
                                       </li> 
                                  </flex-slider>


                                    <div ng-repeat="(prokey,proMd5) in item.failed_to_add_to_cart track by $index">
                                        <div class="product-image mini">

                                            <div class="p_image_innner">

                                                <img ng-src="{{proMd5.image}}" title="{{proMd5.title}}  by {{item.info.name}}">
                                                <div class="rateit">
                                                    <div class="rateis">
                                                    </div>
                                                </div>
                                                <a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
                                            </div>
                                        </div>
                                        <div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div> 
                                    </div>

                               </div> 

                            </div>
                          </li>

                        </ul>
                    </div>
                </div>
            </div>

用过的脚本

<link rel="stylesheet" type="text/css"  href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/flexslider.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider.js"></script>

<script src="https://rawgit.com/wilsonwc/angular-flexslider/master/angular-flexslider.js"></script>

Answer 1

使用不带Angular的Flexsilder并尝试以下代码：

var slider = $('#slider').data('flexslider');
slider.addSlide(obj, position);

要么

$('#slider').flexslider('addSlide', obj[, position]);

因为HTML将在Flexsilder之后呈现;