jQuery的bxslider不与NG视图中模板的视图、不与、模板、jQuery

2023-09-13 02:55:55 作者：这个夏天少了你°

我用我的第一个角项目的jQuery bxslider。它不与NG视图中模板工作。如果使用这种一个没有NG观点意味着它正在工作。

这是我的HTML页面：

 ＆LT;！DOCTYPE HTML＆GT;＆LT; HTML NG-应用=appSathya＆GT;＆LT; HEAD＆GT;＆LT;间的charset =UTF-8＆GT;＆LT;标题＆GT;适度＆LT; /标题＆GT;＆LT;链接HREF =HTTP：//fonts.googleapis.com/css家庭=打开+三世：400italic，600italic，700italic，400600700相对=样式类型=文/ CSS'＆GT;＆LT;链接rel =stylesheet属性HREF =CSS / bootstrap.css＆GT;＆LT;链接rel =stylesheet属性HREF =CSS / style.css文件＆GT;＆LT;链接rel =stylesheet属性HREF =CSS / jquery.bxslider.css＆GT;＆LT; /头＆GT;＆LT;身体GT;    ＆LT;头NG-包括='模板/ header.html中'＆GT;＆LT; /头＆GT;    ＆lt;节NG-视图＆gt;＆LT; /节＆gt;    ＆LT;脚本SRC =JS / angular.js＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本SRC =JS /角route.min.js＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本SRC =JS / jQuery的-1.9.1.js＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本SRC =JS / jquery.bxslider.js＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本SRC =JS / main.js＆GT;＆LT; / SCRIPT＆GT;＆LT; /身体GT;＆LT; / HTML＆GT;

这是我的JavaScript文件

  // JavaScript的文档VAR应用= angular.module（'appSathya'，['ngRoute']）;的app.config（['$ routeProvider'，函数（$ routeProvider）{  $ routeProvider    //首页    。当（/，{templateUrl：谐音/ /home.html的，控制器：PageCtrl}）}]）;app.controller（'menuController'，函数（$范围）{    $ scope.menus = [        {MITEM：家，murl：＃/链接}，        {MITEM：关于，murl：＃/链接}，        {MITEM：工作，murl：＃/链接}，        {MITEM：团队，murl：＃/链接}，        {MITEM：服务，murl：＃/链接}，        {MITEM：功能，murl：＃/链接}，        {MITEM：联系，murl：＃/链接}    ];}）;app.directive（'startslider'，函数（）{    返回{       限制：'A'，       更换：真实，       模板：'＆LT; UL类=bxslider＆GT;' +                   '＆LT;李NG重复=图片中的图片＆GT;' +                     '＆LT; IMG NG-SRC ={{picture.src}}ALT =/＆GT;' +                   '＆LT; /李＆GT;' +                  '＆所述; / UL＆GT;'，       链接：功能（范围，榆树，ATTRS）{          elm.ready（函数（）{               $（。+ $（榆树[0]）。ATTR（类））。bxSlider（{                    模式：'褪色'，                    寻呼机：假的，                    autoControls：真            }）;          }）;      }    };}）;app.controller（'PageCtrl'，函数（$范围）{  $ scope.pictures = [       {SRC：IMG / banner.jpg}，       {SRC：IMG / banner.jpg}，       {SRC：IMG / banner.jpg'}     ];}）;

解决方案

更改您的订单的脚本包含以这种如下：

 ＆LT;脚本SRC =JS / jQuery的-1.9.1.js＆GT;＆LT; / SCRIPT＆GT;＆LT;脚本SRC =JS / angular.js＆GT;＆LT; / SCRIPT＆GT;

这是您的code可能会发生故障的角度都有它jqlite的自己的版本和钢带一定的命名空间和属性...但如果你改变角度的顺序有认识，如果jQuery的电话取代了棱角分明的版本。一个函数的原因

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='"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>

and this is my javascript file

// 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' }
     ];
});

解决方案

Change you order of script includes to this below:

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

the reason that your code may malfunction angular has it's own version of jqlite and strips certain namespaces and attributes... but if you change the order angular has a function that recognize if jquery calls supercede the angular versions.

上一篇：如何提供模拟文件，更改＆LT的事件;输入类型='文件'＆GT;单元测试文件、单元测试、类型、事件

下一篇：为什么我得到Lexerr：未结束的报价错误？错误、结束、Lexerr

相关推荐