天道酬勤,学无止境

jquery bxslider 不适用于 ng 视图中的模板(jquery bxslider is not working with templates inside ng view)

问题

我在我的第一个 angular 项目中使用 jquery bxslider。 它不适用于 ng 视图中的模板。 如果在没有 ng view 的情况下使用这个,则表示它正在工作。

这是我的 HTML 页面:

<!doctype html>
<html ng-app="appSathya">
<head>
<meta charset="utf-8">
<title>Modest</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
</head>

<body>
    <header ng-include='"template/header.html"'></header>
    <section ng-view></section>

    <script src="js/angular.js"></script> 
    <script src="js/angular-route.min.js"></script> 
    <script src="js/jquery-1.9.1.js"></script> 
    <script src="js/jquery.bxslider.js"></script> 
    <script src="js/main.js"></script>
</body>
</html>

这是我的 javascript 文件

// JavaScript Document

var app = angular.module('appSathya', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    // Home
    .when("/", {templateUrl: "partials/home.html", controller: "PageCtrl"})
}]); 

app.controller('menuController', function($scope){
    $scope.menus = [
        {mitem:"Home", murl:"#/link"},
        {mitem:"About", murl:"#/link"},
        {mitem:"Work", murl:"#/link"},
        {mitem:"Team", murl:"#/link"},
        {mitem:"Services", murl:"#/link"},
        {mitem:"Features", murl:"#/link"},
        {mitem:"contact", murl:"#/link"}
    ];
});

app.directive('startslider',function() {
    return {
       restrict: 'A',
       replace: true,
       template: '<ul class="bxslider">' +
                   '<li ng-repeat="picture in pictures">' +
                     '<img ng-src="{{picture.src}}" alt="" />' +
                   '</li>' +
                  '</ul>',
       link: function(scope, elm, attrs) {
          elm.ready(function() {    
               $("." + $(elm[0]).attr('class')).bxSlider({
                    mode: 'fade',
                    pager: false,
                    autoControls: true
            });

          });
      }
    };
});

app.controller('PageCtrl', function($scope) {
  $scope.pictures = [
       {src:'img/banner.jpg' },
       {src:'img/banner.jpg' },
       {src:'img/banner.jpg' }
     ];
});
回答1

将您的脚本顺序更改为以下内容:

<script src="js/jquery-1.9.1.js"></script> 
<script src="js/angular.js"></script> 

您的代码可能出现故障的原因 angular 有它自己的 jqlite 版本并剥离了某些命名空间和属性……但是如果您更改顺序,angular 有一个函数可以识别 jquery 调用是否取代了 angular 版本。

回答2

如果您只需要在 Angular 中使用 jQuery 插件,那么 jQuery Passthrough 指令应该可以做到。

回答3

首先在 AngularJS 之前包含 JQuery,然后在 jquery 代码中使用 jQuery 而不是 $,因为 angular 也使用 $。

回答4

一些插件不能直接与 Angular 一起使用。 例如:- Flexslider 具有与 AngularJS 兼容的单独 JS。

在这里,您可以通过查看这里来解决您的问题

回答5

您是否尝试将脚本 src 链接放在标题中? 当然,有时需要将它们放在页脚中,但是如果您希望它们在其他任何事情之前触发,请使用顺序。 查看代码,我建议放置您的<script src="js/jquery-1.9.1.js"></script><script src="js/jquery.bxslider.js"></script>标签在头上?

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • jquery bxslider is not working with templates inside ng view
    I'm using jquery bxslider on my first angular project. It is not working with template inside ng view. If use this one without ng view means it is working. This is my HTML page: <!doctype html> <html ng-app="appSathya"> <head> <meta charset="utf-8"> <title>Modest</title> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> </head> <body> <header ng-include='
  • 加载AngularJS部分模板后如何应用jquery(How to apply jquery after AngularJS partial template is loaded)
    问题 我有一个简单的网站,该网站实现了jQuery,以便在Index.html顶部横幅中创建带有一些图像的Slider。 现在,我想使用AngularJS,因此我将HTML代码分为多个单独的部分。 标头页脚热门横幅 如果我在原始版本中运行Index.html(不应用AngularJS模式),则可以看到滑块工作正常。 应用AngularJS模式时,我将顶部横幅HTML移到了部分html,然后将ng-view应用于顶部横幅最初所在的div。 var app = angular.module('website', ['ngRoute']); app.config(function($routeProvider) { $routeProvider. when('/about',{templateUrl:'app/partials/about.html'}). when('/contact',{templateUrl:'app/partials/contact.html'}). otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html'}) }); 当我刷新页面时,滑块不起作用,呈现为没有任何jQuery效果的简单html,确实是一团糟。 此部分有一些jQuery插件,通常通过document.ready激活。 但是
  • Python自动化开发学习18-Web前端补充内容
    JavaScript-补充 js正则表达式 在使用之前,首先要创建正则表达式对象,创建对象有两种方式:/pattern/attributes :这个简单,推荐用这个。而且不用写引号new RegExp(pattern, attributes); :和上面的效果一样,这里是通过参数把值传入的,所以必须写上引号。另外还要注意转义字符。参数 pattern 是一个字符串,就是正则表达式。参数 attributes 是一个可选的字符串,包含属性 "g"(全局匹配)、"i"(对大小写不敏感) 和 "m"(多行匹配模式)。分别用上面2中方法创建正则表达式对象,忽略可选的 attributes 参数,两种方法创建出的结果完全一样: > reg1 = /^\d$/; < [regex] /^\d$/: > reg2 = new RegExp("^\\d$"); // 注意字符串了的\要转义 < [regex] /^\d$/: 然后就是用正则表达式对象匹配我们的字符串,这里也学习2个方法:RegExpObject.test(string) :检索字符串是否匹配,返回布尔值(true 或 false)RegExpObject.exec(string) :获取匹配的结果,匹配不到则返回 null。返回一个数组,可以对返回的结果再次匹配。这个方法比较复杂,后面一步一步展开。 > reg1 = /^\d+$
  • BxSlider 将最后一张幻灯片显示为第一张幻灯片(BxSlider displayes last slide as first slide)
    问题 我创建了 4 个滑块。 最初,所有 4 个都是隐藏的(显示:无),因此我使用此代码在单击相应类别时显示相关滑块。 滑块配置。 touchEnabled: true, hideControlOnEnd: true, preloadImages: 'all', infiniteLoop: false, mode: 'horizontal', startSlide: 0, slideWidth: 300, minSlides: 2, maxSlides: 3, slideMargin: 10, pager: false, slideSelector: ".isotope-item", nextSelector: "#forefoo2_next", prevSelector: "#forefoo2_prev", nextText: '', prevText: '', onSliderLoad: function(){ jQuery(".sliloading").hide(); }, jQuery(window).ready(function(){ var slider4 = jQuery('.cat_fore').bxSlider(); var slider2 = jQuery('#cat_two').bxSlider(); var slider3 = jQuery('.cat
  • 如何使bxSlider隐藏幻灯片直到页面加载?(How to get bxSlider to hide the slides until the page loads?)
    问题 我正在建立一个使用bxSlider的网站。 页面加载时,所有幻灯片都可以看到,并且彼此叠放。 页面完全加载后,第一张幻灯片仍然可见,其余幻灯片消失,因此滑块可以设置动画并一次显示一个。 我尝试使用各种CSS和bxSlider回调来隐藏幻灯片,直到页面完全加载,但是没有运气。 有谁知道如何做到这一点? 谢谢! 回答1 加载滑块时,bxslider具有一个回调(onSliderLoad)。我将可见性设置为在容器div上隐藏,然后使用该回调将可见性设置为“可见”。 <div id="siteslides" style="visibility: hidden;"></div> $(".site_banner_slider").bxSlider({ auto: true, slideWidth: $imageWidth, mode: 'fade', onSliderLoad: function(){ $("#siteslides").css("visibility", "visible"); } }); 回答2 我遇到了同样的问题,并以这种方式解决了这个问题: <div class="mySlider" style="display:none"> 然后 $(document).ready(function(){ $('.mySlider').show().bxSlider({
  • 显示/隐藏div中的bxSlider(bxSlider within show/hide divs)
    问题 我页面的内容使用不同的链接切换,使用jQuery的showonlyone函数一次显示一个div 。 加载页面时,不显示任何div。 我一直工作正常,直到尝试将图片滑块(bxSlider)放在div之一newboxes1 。 在盒子外面,bxSlider可以正常工作。 在其中,图片不显示。 请在此处查看实时示例。 这是我的代码如下所示: <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> function showonlyone(thechosenone) { $('.newboxes').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).show(); } else { $(this).hide(); } }); }</script> </script> <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script src="jquery.bxSlider
  • bxslider 停止视频元素自动播放(bxslider stopping video element autoplay)
    问题 我将 Bx 滑块用于标准轮播。 其中一张幻灯片有一个带有自动播放和循环功能的元素,用作背景。 问题是由于某种原因 bx 滑块停止播放视频。 有没有已知的方法来覆盖这种行为。 当页面加载时视频播放正常,直到 bxslider 的 js 触发并停止。 我正在为 bxslider 使用开箱即用的配置,在 li 中是这样的: <video preload="" loop="" autoplay="" class="video-bg"> <source src="<?php echo get_template_directory_uri(); ?>/library/images/tbf/flag.mp4" type="video/mp4"> <source src="<?php echo get_template_directory_uri(); ?>/library/images/tbf/flag.ogv" type="video/ogg"> </video> 提前致谢! 回答1 通过使用回调,我设置了播放所有视频的选项。 不是一个优雅的解决方案,但现在已经足够了: jQuery(document).ready(function(){ jQuery('.top-carousel').bxSlider({ onSliderLoad: function(){ jQuery('video'
  • 调整大小时jquery bxslider轮播问题(jquery bxslider carousel issue when resize)
    问题 我有 bxslider carousel 的问题。 我正在尝试制作响应式网页,并在 js 中使用调整大小方法。 我试图让滑块有 2 张幻灯片,然后通过缩小窗口宽度来制作 1 张幻灯片。 但是,,,,当我缩小窗口宽度时,bxslider 没有改变..... 下面是我的代码。 我搜索了很多关于这个问题的内容,人们要求放置 reloadSlider 或 destroySlider 但我不知道这段代码的确切位置, var slider; function bxslider(){ if(width>555&&width<=765){ slider=$('.bxslider2').bxSlider({ minSlides: 2, maxSlides: 2, slideWidth:400, moveSlides:1 }); slider.reloadSlider(); } if(width<=555){ var slider=$('.bxslider2').bxSlider({ minSlides: 1, maxSlides: 1, slideWidth:0, moveSlides:1 }); slider.reloadSlider(); } } $window.on('resize',function(){ bxslider(); }); 回答1 使用此代码 var slider
  • bxslider 轮播代码(bxslider carousel code)
    问题 我正在尝试从该站点实现滑块 http://bxslider.com/ 我使用了他们所说的确切程序,但我的代码仍然无法正常工作,你们能告诉我如何解决吗 我正在提供我的小提琴代码打击 http://jsfiddle.net/v3efb/3/ http://jsfiddle.net/v3efb/3/embedded/result/ 在下面提供我的代码 <ul class="bxslider"> <li><img src="http://maxcdn.webappers.com/img/2009/01/jquery-carousel.png" /></li> <li><img src="http://maxcdn.webappers.com/img/2009/01/jquery-carousel.png" /></li> <li><img src="http://maxcdn.webappers.com/img/2009/01/jquery-carousel.png" /></li> <li><img src="http://maxcdn.webappers.com/img/2009/01/jquery-carousel.png" /></li> </ul> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2
  • Jquery bxslider exception
    Alright so the problem is basically unknown for me, never had it before. I tried adding bxslider today but it seems it doesnt work properly. I tried using the other version of the JS that he provided but same thing happends, the images keep on "loading" and they never load. I did inspect element and this is what I got jQuery.Deferred exception: Cannot read property 'indexOf' of undefined TypeError: Cannot read property 'indexOf' of undefined at jQuery.fn.load (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:9612:12) at HTMLImageElement. (file:///C:/Users/Oploditelj/Desktop
  • 不同宽度的 bxslider 图像(bxslider images with different widths)
    问题 我正在尝试将 bxslider 与不同大小的图像一起使用,我希望这些图像具有相同的高度和不同的宽度。 我想要一个像 http://bxslider.com/examples/carousel-demystified 上的例子的轮播。 这些示例工作正常,但是,我有 300、400 和 500 像素宽的图像,每个图像具有不同的高度,缩放到相同的 400 像素高度。 我不想调整图像的宽度以使它们相同或裁剪它。 如何将 bxslider 用于不同宽度的图像? 如果使用 bxslider 无法做到这一点,那么是否已经存在针对此行为的 jquery 插件? 示例:http://jsfiddle.net/GdD52/2/ <ul class="slider1"> <li class="slide"><img src="http://placehold.it/140x130&text=FooBar1"/></li> <li class="slide"><img src="http://placehold.it/150x115&text=FooBar2"/></li> <li class="slide"><img src="http://placehold.it/130x160&text=FooBar3"/></li> <li class="slide"><img src="http:/
  • bxslider carousel code
    i am trying to implement the slider from this site http://bxslider.com/ i used the exact procedure what they said but still my code is not working can you guys tell me how to fix it i am providing my fiddle code blow http://jsfiddle.net/v3efb/3/ http://jsfiddle.net/v3efb/3/embedded/result/ providing my code below <ul class="bxslider"> <li><img src="http://maxcdn.webappers.com/img/2009/01/jquery-carousel.png" /></li> <li><img src="http://maxcdn.webappers.com/img/2009/01/jquery-carousel.png" /></li> <li><img src="http://maxcdn.webappers.com/img/2009/01/jquery-carousel.png" /></li> <li><img src=
  • jquery bxslider 集成ajax(jquery bxslider integrate ajax)
    问题 我有这个 bxslider 代码。 $(function(){ $('#slider1').bxSlider({ infiniteLoop: false, hideControlOnEnd: true }); }); 我有这个ajax代码: $(function () { $.get('/Scripts/PagedList/PagedList.Mvc.Template.html', function (pagerTemplate) { // get template for pager // create our pager control object var pagedList = $.pagedList( $.template(null, pagerTemplate), // convert into compiled template function(pageNumber){ return '/home/ajax/#' + pageNumber; // give the pager control the url for loading this page }, { pagesToDisplay: 10 } // optional page render options ); function showNamesAndPagerControl(p) { $
  • 无法在“节点”上执行“appendChild”:新的子元素为空(Failed to execute 'appendChild' on 'Node': The new child element is null)
    问题 这个奇怪的错误从半小时开始就困扰着我。 我正在动态尝试仅使用 JavaScript 应用滑块。 知道为什么会发生这种情况吗? 我可以在 SO 上找到其他问题,但无法理解解决方案。 我是 JS 的新手,如果有人能用外行的方式解释我的事情,我非常感激。 这是我的代码。 标记 <!DOCTYPE html> <html> <head> <title>JS sample test page</title> <link rel="stylesheet" type="text/css" href="jquery.bxslider.css"> </head> <body> <div class="og-fullimg"></div> <script type="text/javascript" src="jquery-1.11.1.js"></script> <script type="text/javascript" src="jquery.bxslider.min.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html> 爪哇脚本 // code for thumbnail slider begins (function() { var ogImg = document
  • jquery bxslider carousel issue when resize
    i have a problem with bxslider carousel. im trying to make responsive web and im using resize method in js. im trying to make slider has 2 slides and then 1 slide by shrinking window width. But,,,, when i shrink window width, bxslider is not changing..... below is my code. i searched a lot about this problem,, ppl ask to put reloadSlider or destroySlider but i dnt know where exactly put in this code,, var slider; function bxslider(){ if(width>555&&width<=765){ slider=$('.bxslider2').bxSlider({ minSlides: 2, maxSlides: 2, slideWidth:400, moveSlides:1 }); slider.reloadSlider(); } if(width<=555){
  • BxSlider displayes last slide as first slide
    I have created 4 sliders. Initially all 4 are hidden (display:none) so I have used this code to display the relevant slider on click of its respective category. The slider configuration. touchEnabled: true, hideControlOnEnd: true, preloadImages: 'all', infiniteLoop: false, mode: 'horizontal', startSlide: 0, slideWidth: 300, minSlides: 2, maxSlides: 3, slideMargin: 10, pager: false, slideSelector: ".isotope-item", nextSelector: "#forefoo2_next", prevSelector: "#forefoo2_prev", nextText: '', prevText: '', onSliderLoad: function(){ jQuery(".sliloading").hide(); }, jQuery(window).ready(function(){
  • bx滑块:单击默认的bx传呼机后如何继续自动滑动?(bx slider: How to continue auto sliding after clicking in default bx pager?)
    问题 我想在单击bx传呼机项目后继续自动滑动。 这是代码: $(document).ready(function () { $('.bxslider').bxSlider({ mode: 'horizontal', //mode: 'fade', speed: 500, auto: true, infiniteLoop: true, hideControlOnEnd: true, useCSS: false }); $(".bx-pager-link").click(function () { console.log('bla'); slider = $('.bxslider').bxSlider(); slider.stopAuto(); slider.startAuto(); //slider.stopShow(); //slider.startShow(); }); }); 未注释的stopShow()和startShow( )函数根本不起作用。 startAuto()继续幻灯片放映,但bx寻呼机导航被冻结。 即使出现新幻灯片,活动点仍保持活动状态。 怎么解决呢? 回答1 您可以这样尝试: $(document).ready(function () { var slider = $('.bxslider').bxSlider({ mode: 'horizontal', /
  • 滑块外的 Bxslider 自定义标题(Bxslider custom caption outside of slider)
    问题 我正在尝试将 bxslider 标题移到滑块之外。 由于存在“溢出:隐藏”,我无法仅使用 css 来完成。 我正在尝试做的事情: <div class="captions"></div> // I need display captions here <ul> <li><img src="images/1.jpg" title="Caption 1"></li> <li><img src="images/2.jpg" title="Caption 2></li> </ul> 使用此代码生成的字幕: var appendCaptions = function(){ // cycle through each child slider.children.each(function(index){ // get the image title attribute var title = $(this).find('img:first').attr('title'); // append the caption if (title != undefined && ('' + title).length) { $("this").append('<div class="bx-caption"><span>' + title + '</span></div>'); } }); }
  • I can't get basic bxslider to work
    **Okay, so don't kill me, I"m new to jquery and bxsliders, but I"m about to punt this whole thing and need a saviour. I think all my files are in the right places...I just can't figure this out. Simple problem: trying to get a slider to work:** <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://bxslider.com/lib/jquery.bxslider.js"></script> </head>
  • 多个幻灯片上的公共方法 bxslider(Public methods bxslider on multiple slideshows)
    问题 我有多个幻灯片,我正在使用此代码: var demo = $('.demo').bxSlider({ mode: 'horizontal', captions: false, touchEnabled: true, controls: false, pager:false }); $('.slider-next').click(function(){ demo.goToNextSlide(); return false; }); $('.slider-prev').click(function(){ demo.goToPrevSlide(); return false; }); 但它不起作用......有人知道为什么会这样吗? 谢谢! 回答1 我在一页上有多个滑块时遇到了同样的问题:用于控制幻灯片的公共功能不起作用(与您在示例中的操作方式相同)。 解决方案是设置 controls=true 并为每个实例创建唯一的“prevSelector”和“nextSelector”。 这样 bxslider-instance 有每个独特的 prev en next-button(图像或任何你在那里填写的文本)。 我认为不需要将 bxslider 连接到唯一 div(id) 的方式。 这个实现对我有用,childid 作为唯一性的绑定变量: html (/php): <div id=