CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsjquery-plugins
Sathya
Sathya

Reputation: 1734

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

Upvotes: 9

Views: 1497

Answers (4)

JFly28
JFly28

Reputation: 101

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.

Upvotes: 2

Kurtis Rogers
Kurtis Rogers

Reputation: 95

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?

Upvotes: 0

Mahesh
Mahesh

Reputation: 110

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

Upvotes: 0

Dmitri Zaitsev
Dmitri Zaitsev

Reputation: 14066

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

Upvotes: 0

Related Questions