javascript - 即使按正确顺序包含所有必要的脚本后，AngularJS-Slick 也无法正常工作

Question

我正在为我的项目使用 angularJs-slick slider 来将一些包显示为滑动功能。

我已经包含了所有必要的文件并通过 Controller 动态获取包。

这里的包一个接一个地显示，而不是在带有滑动 Controller 按钮的 slider 中显示。并且控制按钮未加载到 DOM 中。任何帮助表示赞赏。如果我在这里做错了什么，请纠正我。谢谢

    <div class="row slick-container">
            <slick settings="responsiveConfig">
                {% verbatim %}
                    <div class="col-xs-11 col-xs-offset-0-5 col-sm-11 col-sm-offset-0-5">
                        <div class="row slick-container text-elegant">
                            <slick slides-to-show="4" slides-to-scroll="4">
                                <div class="col-sm-3 space-bottom-none slick-anchor space-top-none" ng-repeat="item in popularpackages">
                                    <div class="panel panel-default panel-elegant">
                                        <div class="panel-header text-center hidden-xs">
                                            <img class="img-responsive inline full-block" ng-src="/images/aa1.{{loop.index+1}}.jpg" />
                                        </div>
                                        <div class="panel-body">
                                            <a ng-click="trackPopularClick('{{item.test_name}}')" title="{{ item.test_name }}">
                                                <div class="text-center">
                                                    <div title="{{ item.test_name }}">
                                                        <h3 class="space-top-none text-heading text-primary text-ellipsis text-center">{{ item.test_name }}</h3>
                                                        <span class="text-sm text-muted">Best Suited Category:</span>
                                                        <img class="img-responsive inline"  style="height:1em;display:inline;border:0;" ng-src="/images/{{ item.item_icon }}.png"> <span class="text-sm text-muted">{{ item.item_name }}</span>
                                                        <div class="text-elegant text-heading text-muted text-center space-top-lg">
                                                            <span class="text-base text-center">{{ item.bundledTestsCount }} parameters</span></br>
                                                            <span>
                                                                INR
                                                                <del class="text-muted">{{ item.price }}</del>
                                                                <span class="text-secondary text-lg">{{ item.displayPrice }}</span>
                                                            </span>
                                                        </div>
                                                        <hr />
                                                        <span ng-repeat="organ in item.organCovered | split:',':0">
                                                            <img title="{{ organ }}" alt="{{ organ }}"
                                                                    class="inline img-responsive" ng-src="/images/organs/{{ organ|trim }}.png"
                                                                    style="height: 15px;">
                                                            <span class="text-primary">{{ organ|trim }}</span>
                                                        </span>
                                                        </br></br>
                                                        <a href="/packages/{{item.slug}}-in-{{locationCity}}">
                                                        <button class="btn-span blueBorderBtn btn-float-left">+ Know more</button>
                                                        </a>
                                                        <button class="btn btn-primary btn-float-right" ng-click="checkout(item.testLabId,locationCityId)">Book Now</button>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </slick>
                            </div>
                        </div>
                    </div>    
                {% endverbatim %}
            </slick>
        </div>

verbatims are used because I am using twig 
```JAVASCRIPTS: this is in the proper structure 
    angular.module('MT.app', [
        'slickCarousel'
    ])

    .controller ('popularTestsController', function (
            $scope,
        ) {
        $scope.responsiveConfig = {
            enabled: true,
            autoplay: true,
            draggable: false,
            autoplaySpeed: 3000,
            method: {},
            dots: false,
            infinite: false,
            speed: 300,
            slidesToShow: 3,
            slidesToScroll: 3,
            event: {
                beforeChange: function (event, slick, currentSlide, nextSlide) {
                },
                afterChange: function (event, slick, currentSlide, nextSlide) {
                }
            },
            responsive: [{
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }]
        };

    })

javascript is properly included in the js file, from module declaration to controller usage.
below css and JS cdn are included in the same order as I have mentioned below:
```CSS CDN 
    <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/>

```JS CDN 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>   
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-slick-carousel/3.1.7/angular-slick.js"></script>

Answer 1

使用 ng-if 加载 slick

<slick setting="responsiveConfig" arrows="true" ng-if="popularpackages.length > 0">