在Angularjs中嵌入JQuery

Embedding JQuery in Angularjs

本文关键字：JQuery Angularjs      更新时间：2023-09-26

使用包含幻灯片，菜单和旋转木马的JQuery模板在anugularjs项目上工作。我如何嵌入JQuery主脚本处理渲染在angularjs。

我这样做了 

 $scope.load = function () {
        jQuery('#tp-banner').show().revolution({
            dottedOverlay: "none",
            delay: 6000,
            startwidth: 1170,
            startheight: 700,
            hideThumbs: 200,
            thumbWidth: 100,
            thumbHeight: 50,
            thumbAmount: 5,
            navigationType: "bullet",
            navigationArrows: "solo",
            navigationStyle: "square",
            touchenabled: "on",
            onHoverStop: "off",
            swipe_velocity: 0.7,
            swipe_min_touches: 1,
            swipe_max_touches: 1,
            drag_block_vertical: false,
            parallax: "mouse",
            parallaxBgFreeze: "on",
            parallaxLevels: [7, 4, 3, 2, 5, 4, 3, 2, 1, 0],
            keyboardNavigation: "off",
            navigationHAlign: "center",
            navigationVAlign: "bottom",
            navigationHOffset: 0,
            navigationVOffset: 20,
            soloArrowLeftHalign: "left",
            soloArrowLeftValign: "center",
            soloArrowLeftHOffset: 20,
            soloArrowLeftVOffset: 0,
            soloArrowRightHalign: "right",
            soloArrowRightValign: "center",
            soloArrowRightHOffset: 20,
            soloArrowRightVOffset: 0,
            shadow: 0,
            fullWidth: "on",
            fullScreen: "off",
            spinner: "spinner4",
            stopLoop: "off",
            stopAfterLoops: -1,
            stopAtSlide: -1,
            shuffle: "off",
            autoHeight: "off",
            forceFullWidth: "off",
            hideThumbsOnMobile: "off",
            hideNavDelayOnMobile: 1500,
            hideBulletsOnMobile: "off",
            hideArrowsOnMobile: "off",
            hideThumbsUnderResolution: 0,
            hideSliderAtLimit: 0,
            hideCaptionAtLimit: 0,
            hideAllCaptionAtLilmit: 0,
            startWithSlide: 0,
            videoJsPath: "rs-plugin/videojs/",
            fullScreenOffsetContainer: ""
        });
    }
    $scope.load();

在上面的代码片段中，我尝试使用控制器嵌入滑动条，但是它没有加载。

Angular是一个JS框架，它为许多复杂的javascript任务提供了简单的方法。jQuery是一个JavaScript UI库。

这意味着你需要把它放入视图，而不是控制器，因为它们是不同的东西。

在你的index.html文件中，放入这一行:

<script src="/path/to/libs/folder/jquery-X.x.x.min.js />

这会在你的索引中加载你的jQuery库，所以它对视图是可用的(在Angular中，视图会用索引来呈现)。

现在，在您的视图中，在<script>标签中，插入您的jQuery代码。

这个任务不需要作用域:)

相关文章：