如何在AngularJS控制器中使用jQuery？

Question

我通常将jQuery代码放在一个函数中，然后从控制器中调用它。

下面的示例是幻灯片，它是从控制器调用但没有任何反应。除了一个函数（changePanel函数）之外，我输入了一些console.log。

以下是带有代码的jsfiddle：

https://jsfiddle.net/codeforme2016/rb1cp2L4/

这里是代码：

app.directive('shopProject', function () {
 return {
    restrict: 'E',
    templateUrl: 'projects/shop/shop.html',
    scope: {},
    controller: 'shopCtrl',
    link: function(scope){}
 } 
})

app.controller('shopCtrl', function($scope) {

 function slider() {
    console.log("haaaaaa")
    $(function() {
        console.log("haaaaaa2222")

        var SliderModule = (function() {
            console.log("haaaaaa333")
            var pb = {};
            pb.el = $('#slider');
            pb.items = {
                panels: pb.el.find('.slider-wrapper > li'),
            }

            var SliderInterval,
                currentSlider = 0,
                nextSlider = 1,
                lengthSlider = pb.items.panels.length;


            pb.init = function(settings) {
                console.log("haaaaa4444a")
                this.settings = settings || {
                    duration: 8000
                };
                var items = this.items,
                    lengthPanels = items.panels.length,
                    output = '';


                for (var i = 0; i < lengthPanels; i++) {
                    if (i == 0) {
                        output += '<li class="active"></li>';
                    } else {
                        output += '<li></li>';
                    }
                }

                $('#control-buttons').html(output);

                activateSlider();
                // Eventos para los controles
                $('#control-buttons').on('click', 'li', function(e) {
                    var $this = $(this);
                    if (!(currentSlider === $this.index())) {
                        changePanel($this.index());
                    }
                });

            }


            var activateSlider = function() {
                console.log("haaaaaa5555")
                SliderInterval = setInterval(pb.startSlider, pb.settings.duration);
            }

            pb.startSlider = function() {

                var items = pb.items,
                    controls = $('#control-buttons li');
                // Comprobamos si es el ultimo panel para reiniciar el conteo
                if (nextSlider >= lengthSlider) {
                    nextSlider = 0;
                    currentSlider = lengthSlider - 1;
                }

                  controls.removeClass('active').eq(nextSlider).addClass('active');
                items.panels.eq(currentSlider).fadeOut('slow');
                items.panels.eq(nextSlider).fadeIn('slow');


                currentSlider = nextSlider;
                nextSlider += 1;
            }


            var changePanel = function(id) {
                console.log("haaaaaaughg99999")
                clearInterval(SliderInterval);
                var items = pb.items,
                    controls = $('#control-buttons li');
                // Comprobamos si el ID esta disponible entre los paneles
                if (id >= lengthSlider) {
                    id = 0;
                } else if (id < 0) {
                    id = lengthSlider - 1;
                }

                controls.removeClass('active').eq(id).addClass('active');
                items.panels.eq(currentSlider).fadeOut('slow');
                items.panels.eq(id).fadeIn('slow');


                currentSlider = id;
                nextSlider = id + 1;

                activateSlider();
            }

            return pb;
        }());

        SliderModule.init({
            duration: 4000
        });

    });
 }
 slider();

})

HTML：

<section id="slider" class="container">
  <ul class="slider-wrapper">
    <li class="current-slide">
        <img  src="http://i9.photobucket.com/albums/a88/creaticode/1_zpsc6871490.jpg" title="" alt="">

        <div class="caption">
            <h2 class="slider-title">Diseño web</h2>
            <p>Lorem ipsum</p>
        </div>
    </li>

    <li>
        <img src="http://i9.photobucket.com/albums/a88/creaticode/2_zps6ccd36bd.jpg" title="" alt="">

        <div class="caption">
            <h2 class="slider-title">Diseño Responsive</h2>
            <p>Lorem ipsum </p>
        </div>
    </li>

    <li>
        <img src="http://i9.photobucket.com/albums/a88/creaticode/4_zps611bc9f9.jpg" title="" alt="">

        <div class="caption">
            <h2 class="slider-title">Identidad Corporativa</h2>
            <p>Lorem ipsum </p>
        </div>
    </li>

    <li>
        <img src="http://i9.photobucket.com/albums/a88/creaticode/3_zps70e4fcc5.jpg" title="" alt="">

        <div class="caption">
            <h2 class="slider-title">Desarrollo Web</h2>
            <p>Lorem ipsum</p>
        </div>
    </li>
 </ul>

   <div class="slider-shadow"></div>

  <ul id="control-buttons" class="control-buttons"></ul>
</section>

编辑：问题似乎在于我如何引用我的文件等，因为如果所有文件都在同一目录中它的工作原理 -

JS / index.html的

<script src="projects/shop/shop.directive.js"></script>

JS /家/ home.html做为 JS /家庭/ home.js

hier I have also included jQuery in controllers + called it from insight which WORKS

JS /项目/店铺/ shop.html JS /项目/店铺/ shop.directive.js

我有车间指令和控制器，并且在html.js -call jQuery中执行相同操作，但是这里没有工作。

我说。正确包含index.html中的所有脚本标记，否则我将无法从模板中看到内容。