Menu
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' }
];
});
385
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.
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
