jQuery Bxslider 不适用于 NG View 中的模板

jquery bxslider is not working with templates inside ng view

本文关键字：View NG Bxslider 不适用 适用于 jQuery      更新时间：2023-09-26

我在我的第一个角度项目中使用了jquery bxslider。它不适用于 ng 视图中的模板。如果在没有ng视图的情况下使用这个意味着它正在工作。

这是我的 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' }
     ];
});

更改脚本的顺序如下：

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

您的代码可能出现故障的原因 Angular 有自己的 JQLITE 版本并剥离了某些命名空间和属性......但是如果你改变顺序，Angular 有一个函数可以识别 jQuery 调用是否取代 Angular 版本。

如果你只需要在 Angular 中使用一个 jQuery 插件，那么jQuery Passthrough 指令应该这样做。

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

您是否尝试过将脚本 src 链接放在标题中？当然，有时需要将它们放在页脚中，但如果您希望它们先触发，请按顺序运行。查看代码，我建议将<script src="js/jquery-1.9.1.js"></script><script src="js/jquery.bxslider.js"></script>标签放在头部？

相关文章：