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

回答1:

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.

回答2:

If all you need is to use a jQuery plugin inside Angular, then the jQuery Passthrough directive should do it.

回答3:

First include JQuery before AngularJS, then in jquery code use jQuery instead of $ since angular also uses $.

回答4:

Some plugins not directly work with Angular. Ex:- Flexslider has separate JS which is compatible with AngularJS.

Here, you can solve your problem by looking at here

回答5:

Have you tried placing your script src links in the header? Sure, it's sometimes required to place them in the footer, but if you want them to fire before anything else, play about with the order. Looking at the code, I'd suggest placing your <script src="js/jquery-1.9.1.js"></script><script src="js/jquery.bxslider.js"></script> tags in the head?

来源：https://stackoverflow.com/questions/27216148/jquery-bxslider-is-not-working-with-templates-inside-ng-view

标签

javascript

jquery

html

angularjs

jquery-plugins