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

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

下面的例子是一个幻灯片，它是从控制器调用的，但什么也没有发生。我放入了几个

控制台.log

，除了一个功能（changePanel功能）外，其他功能都会显示出来

以下是带有代码的JSFIDLE：

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();

})

代码如下：

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();

})

js/projects/shop/shop.html js/projects/shop/shop.directive.js

hier我有shop指令和控制器，并执行与html.js中相同的操作-从insight控制器调用jQuery，但在这里什么都不起作用

---

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

演示中的资源路径无效。请注意，这样的代码属于指令而不是控制器。一般来说，您应该使用AngularJS来附加事件处理程序、控制HTML等，而不是jQuery。如果您之前已经创建了jQuery，可能会更容易，但最终会让您和其他人感到困惑。我刚刚查看了您的链接，是的，它可以工作，所以我想它是关于我如何引用事物/我想是关于文件结构的。请看我的编辑我使用jQuery，因为我不知道如何使用angular进行dom操作，制作一个简单的滑块将花费我一辈子的时间来使用angular，所以我不知道。演示中的资源路径对我来说是无效的。请注意，这样的代码属于指令而不是控制器。一般来说，您应该使用AngularJS来附加事件处理程序、控制HTML等，而不是jQuery。如果您之前已经创建了jQuery，可能会更容易，但最终会让您和其他人感到困惑。我刚刚查看了您的链接，是的，它可以工作，所以我想它是关于我如何引用事物/我想是关于文件结构的。请看我的编辑我使用jQuery，因为我不知道如何使用angular进行dom操作，制作一个简单的滑块将永远使用angular，所以我不这么做。

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