在Angularjs中嵌入JQuery

时间:2016-09-19 12:58:45

标签: javascript jquery angularjs

使用包含幻灯片,菜单和轮播的anugularjs模板处理JQuery项目。如何在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();

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

1 个答案:

答案 0 :(得分:-1)

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

这意味着您需要将它放入您的视图中,而不是控制器,因为它们是不同的东西。

index.html文件中,输入以下行:

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

这将在您的索引中加载您的jQuery库,因此它可用于视图(在Angular中,视图将使用索引呈现)。

现在,在您的视图中,在<script>标记内插入您的jQuery代码。

您不需要此任务的范围:)