Develop Reference

When html page loads first time ion-slide-box not works

My ion-slide-box not works when the page loads. If i refresh the page then its works properly. I'm refer some links but can't solve this solve this issue. Please help me on this.
My html code.
<ion-view view-title="" hide-back-button="true">
<ion-content class="padding" style="top: 48px;" ng-show="viewEntered">
<ion-item ng-show="emptyCategory">
<h2 style="text-align:center; font-weight:bold; white-space:normal;">No category found.</h2>
</ion-item>
<div class="row" ng-repeat="categoryDetail in categoryDetailList">
<div class="col card" style="margin-bottom:5px;margin-top:5px;" ng-if="categoryDetail.token==1">
<div class="row no-padding">
<div class="col col-33 no-padding"><img ng-src={{categoryDetail.image}} height="110px;" width="100%;"> </div>
<div class="col col-67 no-padding-top">
<div class="row responsive-md no-padding-top" style="margin:0;">
<div class="col no-padding" style="margin: 0;">{{categoryDetail.title}}</div>
<div class="col no-padding" style="margin: 0;"><i class="icon ion-android-call"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.phoneNo}} </span></div>
<div class="col no-padding" style="margin: 0;"><i class="icon ion-android-mail"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.email}} </span></div>
<div class="col no-padding" style="margin: 0;"><i class="icon ion-location"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.location_name}} </span></div>
<div class="col no-padding" style="margin: 0;"><i class="icon ion-ios-world-outline"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.website}} </span></div>
</div>
</div>
</div>
<div ng-if="categoryDetail.paidStatus == 1" class="col" style="margin: 0;text-align: right;border-top:1px solid #AFAFAF;">
<button class="button button-small icon-right ion-android-arrow-dropright-circle button-dark" ng-click="getcategoryDeail(categoryDetail.id)">
View Details
</button>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<ion-slide-box does-continue="true" auto-play="true" slide-interval="2000" on-slide-changed="slideHasChanged($index)">
<ion-slide ng-repeat="advertise in advertiseDetailList" >
<div ng-class="getRandomColor(advertise.profileId)" ui-sref="app.categoryDetail({detailsId: advertise.profileId})">
<img ng-src="{{advertise.image}}" width="100%" height="125px" />
</div>
</ion-slide>
</ion-slide-box>
</div>
</ion-content>
</ion-view>
My controller code :
.controller('CategoryIdDetailController', function($timeout, $scope, $http, $state, baseUrl, $ionicLoading, $stateParams, $ionicBackdrop, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate) {
$scope.$on("$ionicView.enter", function () {
$scope.viewEntered = true;
});
$scope.$on("$ionicView.beforeLeave", function () {
$scope.viewEntered = false;
});
$ionicLoading.show({
template: '<ion-spinner icon="spiral"></ion-spinner>'
});
$scope.advertiseDetailList = [];
$http({
method : "GET",
url : baseUrl+"category_id="+$stateParams.categoryId+"&methodName=category.detailList"
}).then(function mySucces(response) {
if(response.data.responseMsg.resultLength == 0) {
$ionicLoading.hide();
$scope.categoryDetailList = response.data.responseMsg.category;
$scope.emptyCategory = true;
} else {
$ionicLoading.hide();
$scope.categoryDetailList = response.data.responseMsg.category;
//$scope.advertiseDetailList = response.data.responseMsg.advertise;
$scope.$watch('learnSpeed', function (newValue, oldValue) {
$ionicSlideBoxDelegate.update();
});
angular.forEach(response.data.responseMsg.advertise, function(value, key) {
$scope.advertiseDetailList.push({'image': value.image});
})
$scope.emptyCategory = false;
}
});
$scope.getcategoryDeail = function(detailsId) {
$state.go('app.categoryDetail',{detailsId:detailsId});
}
})
Server response :
"responseMsg": {
-
"0": {
"id": 1,
"imgContent": "images/1.jpeg",
"profileId": 9,
"image": "http://localhost/helloKasaragodApi/static/images/1.jpeg"
},
-
"1": {
"id": 2,
"imgContent": "images/2.jpeg",
"profileId": 16,
"image": "http://localhost/helloKasaragodApi/static/images/2.jpeg"
},
-
"2": {
"id": 3,
"imgContent": "images/3.jpeg",
"profileId": 33,
"image": "http://localhost/helloKasaragodApi/static/images/3.jpeg"
}
},

After you get the data from the server and add it to the variable you want use $scope.$apply(); to update the $scope variables on the page.

You can use ion-slides like following way:
<ion-slide ng-repeat="artist in data.random_artists">
<div class="box">
{{artist.title}}
</div>
</ion-slide>
.controller('HomeCtrl', function($scope, $stateParams, $ionicSlideBoxDelegate, DataHandler) {
$scope.data.random_artists = DataHandler.GetRandomArtists(3);
setTimeout(function(){
$ionicSlideBoxDelegate.update();
},5000);
}
Ref: https://forum.ionicframework.com/t/slides-generated-with-ng-repeat-causing-issues-slide-box/394/15

Previous and Next Page is Angular

I am building a site on my main page. I'm grabbing some data from JSON, and displaying it all. It includes a bunch of albums with fields like album title, album artist, etc. When I click on one album, it sends another call to the api via angular and grabs the data for just that album and displays it.
On this page, I want to have ‘previous’ and ‘next’ buttons to display the previous albums data and the next albums
I'm not sure how to do this
this is the albums/ main page ...
<section class="container-fluid music-section pad-bottom-60 pad-top-20 pad-top-30-l">
<div class="clear album-collection">
<div class="row">
<div ng-repeat="albums in music">
<a href="/music/{{albums.slug}}" class="col-12 col-1-5-xl col-1-4-l col-1-2-m album-collection__cover transition">
<img ng-src='{{albums.better_featured_image.source_url}}'>
<div class="album-overlay">
<div class="album-overlay__text-container animate">
<div class="album-overlay-text">
<span>JMP-{{albums.acf.album_cat_no}}</span>
<br><br>
<h3>{{albums.title.rendered}}</h3>
<br><br>
<span>View Album</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
this is one album page :
<section class="container-fluid music-album-section pad-bottom-60">
<div class='clear row'>
<div class="col-2-5-l col-12 music-album__left-section">
<img class="pad-top-60-l pad-top-20 animate fade-in-left-big" ng-src='{{album.better_featured_image.source_url}}'>
</div>
<div class="col-1-2-l push-1-l col-12 music-album__right-section pad-top-60-l pad-top-20 pad-bottom-50 animate fade-in-big">
<a class="back-to-all-music-link pad-bottom-50" href="/music/"><img src="../img/left-arrow.png">All Albums</a>
<span class="animate fade-in-left-big track-numbers">{{album.acf.album_track_number}} Tracks</span>
<span class="animate fade-in-left-big catalogue-number">JMP-{{album.acf.album_cat_no}}</span>
<div class="row">
<div class="col-12 col-4-5-l pad-top-10">
<h1 class="animate fade-in-left-big music-album-title">{{album.title.rendered}}</h1>
<article class="pad-bottom-30 pad-top-10">
<p class="animate fade-in-left-big" ng-bind-html="album.content.rendered"></p>
</article>
</div>
<div class="col-1-3-l col-1-2 pad-top-30-l pad-bottom-60-l pad-bottom-20">
<button class="animate fade-in-left-big button-primary button-primary__big">
<img src= "./img/play-button.png">
<span>Play Montage</span>
</button>
</div>
<div class="col-1-3-l col-1-2 pad-top-30-l pad-bottom-60-l pad-bottom-20">
<button class="animate fade-in-left-big button-primary button-primary__big">
Listen & download
</button>
</div>
</div>
<div class="next-previous-album-links pad-top-30-l pad-top-40-s pad-bottom-20">
<img src="./img/left-arrow.png">Previous Album
Next Album<img src="./img/right-arrow.png">
</div>
</div>
</div>
</section>
and my angular :
angular.module('app', ['ngRoute', 'ngSanitize'])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/', {
templateUrl: myLocalized.partials + 'main.html',
controller: 'Main'
})
.when('/music', {
templateUrl: myLocalized.partials + 'music.php',
controller: 'Music'
})
.when('/music/:slug/', {
templateUrl: myLocalized.partials + 'album.html',
controller: 'Album'
})
.otherwise({
redirectTo: '/'
});
})
.controller('Main', function ($scope, $http, $routeParams) {
$http.get('wp-json/wp/v2/posts/').success(function (res) {
$scope.posts = res;
});
})
.controller('Music', function ($rootScope, $scope, $http, $routeParams) {
$http.get('wp-json/wp/v2/post_music').success(function (res) {
$rootScope.music = res;
console.log($scope.music)
});
})
.controller('Album', function ($scope, $http, $routeParams, $rootScope) {
$http.get('wp-json/wp/v2/post_music/?filter[name]=' + $routeParams.slug).success(function (res) {
$scope.album = res[0];
});
});

Angular route not working in custom menu directive

I am having hard time to route to particular url since the menu is coming from directive. Below is the code:
The Route:
var myApp = angular.module('myApp', ['ngRoute', 'mainMenu']);
myApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'pages/main.html'
})
.when('/home', {
templateUrl: 'pages/home.html'
})
.when('/bollywoodGossips', {
templateUrl: 'pages/bollywoodGossip.html'
})
.when('/bollywoodNews', {
templateUrl: 'pages/bollywoodNews.html'
})
.when('/bollywoodEvents', {
templateUrl: 'pages/bollywoodEvents.html'
})
.when('/bollywoodFitness', {
templateUrl: 'pages/bollywoodFitness.html'
})
.when('/bollywoodWallpaper', {
templateUrl: 'pages/bollywoodWallpaper.html'
})
.otherwise('/', {
templateUrl: 'pages/main.html'
})
})
The Directive:
(function(){
var mainMenu = angular.module('mainMenu', []);
var newMenu = function($location) {
var link = function(scope, element, attrs) {
element.parent('a.menuBtn').click(function(){
element.toggleClass('test');
});
}
return {
restrict: 'E',
replace: true,
templateUrl: 'pages/directiveTemplate/menu.html',
link: link
}
}
newMenu.$inject = ['$location'];
mainMenu.directive('newMenu', newMenu);
}());
The Menu Template:
<ul class="dropdownMenu">
<li>Bollywood Gossip</li>
<li>Bollywood News</li>
<li>Events</li>
<li>Celeb fitness Mantra</li>
<li>Celeb Wallpapers</li>
</ul>
And the html:
<div class="mainMenu">
<p>
<span class="breadCrumb">Home</span>
<a href="" class="menuBtn">Menu <span class="glyphicon glyphicon-th-large"></span>
<new-menu></new-menu>
</a>
</p>
</div>
The Index file:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="mainHeader">
<img src="imgs/mainHeader.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
<div ng-view></div>
<div class="row">
<div class="col-xs-12">
<div class="footer">
<p>©2016 All rights reserved. NAYSA VAS Communications Pvt.Ltd.</p>
</div>
</div>
</div>
</div>
This renders correctly but when i click on any link inside the menu it does not route to that particular url. e.g #/bollywoodGossips .should go to index.html#/bollywoodGossips but it is not routing and remains still on index.html#/home. Please help I am new to directives..

Angular Background Slider using photos directly from foursquare

I'm working on adding some features to make my project app look better. It's an app that creates a chatroom in any building you are located nearby based on location. It is currently integrating foursquare to get the user's location, but also to get photos for the chatroom they entered (i.e. they enter a bar, it shows the first five photos that foursquare has on that bar). I want to make a background slider using angular, but I am beyond stuck on how to get it properly implemented.
Here is my code for the chatroom template:
<ng-include src="'/templates/navbar.html'"></ng-include>
<div ng-repeat="photo in photos" >
<img ng-src="{{photo.prefix}}300x300{{photo.suffix}}"></img>
</div>
<div class="container">
<div class="row " style="padding-top:40px;">
<h3 class="text-center">{{venue}} </h3>
<br />
<br />
<div class="col-md-8">
<div class="panel panel-info">
<div class="panel-heading">
RECENT CHAT HISTORY
</div>
<div scroll-glue class="panel-body" style="overflow-y: auto; height: 540px;">
<ul class="media-list">
<li class="media" ng-repeat="message in messages">
<div class="media-body">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" style="height: 57px; width: 88px; max-height: 57px; max-width: 88px;" ng-src="{{message.img}}" />
</a>
<div class="media-body">
<p class="chatText" ng-bind-html="message.message | emoji"></p>
<br />
<small class="text-muted">Posted by <b>{{message.username}}</b>, at {{message.createdAt}}</small>
<hr />
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="panel-footer">
<form ng-submit="createMSG(message)">
<div class="input-group">
<input type="text" class="form-control" ng-model="message" placeholder="Enter Message" />
<span class="input-group-btn">
<span style="margin: 0 20px;" emoji-picker="message" placement="right" title="Emoji" recent-limit="12"></span>
<button class="btn btn-custom" type="submit">SEND</button>
</span>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
ONLINE USERS
</div>
<div class="panel-body">
<ul class="media-list">
<li class="media" ng-repeat="user in users">
<div class="media-body">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" style="height: 57px; width: 88px; max-height: 57px; max-width: 88px;" ng-src="{{user.img}}" />
</a>
<div class="media-body">
<h5>{{user.username}} | User </h5>
<small class="text-muted" style="color: green;"><b>Online</b></small>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Here is my controller that allows you to check-in to the chatroom with the integrated foursquare:
angular.module('thesis.foursquare', ['ngRoute'])
.controller('CheckinController', ['$scope', '$location', '$window', '$cookies', '$rootScope', '$http', 'UserService',
function checkInCtrl($scope, $location, $window, $cookies, $rootScope, $http, UserService) {
if (!$cookies.get('id')) {
$location.path("/login");
} else {
// get users gps coords
navigator.geolocation.getCurrentPosition(function(position) {
$scope.lat = position.coords.latitude;
$scope.long = position.coords.longitude;
$http({
method: 'GET',
url: 'https://api.foursquare.com/v2/venues/explore/?client_id=AL4DDIM5HHXXYV1HKMQBGFLFIJRHJVPR4BI4CJ0VQIN4PHGZ&client_secret=VXRH3J0QWAJKGIPHMEIOWWR3YSADCO3S2IJQMS3BNVEDFYUE&v=20130815&ll=' + $scope.lat + ',' + $scope.long + '&radius=800'
}).then(function successCallback(response) {
$scope.venue = [];
$.map(response.data.response.groups[0].items, function(venues) {
$.map(venues, function(venue) {
if (venue.id) {
var aVenue = {};
aVenue.id = venue.id;
aVenue.name = venue.name;
aVenue.location = venue.location;
aVenue.contact = venue.contact;
$scope.venue.push(aVenue);
}
});
});
});
}, function error(msg) {
alert('Please enable your GPS position future.');
}, {
maximumAge: 600000,
timeout: 5000,
enableHighAccuracy: true
});
$scope.venue = [];
var checkin = function() {
};
// url: 'https://api.foursquare.com/v2/venues/explore/?client_id=AL4DDIM5HHXXYV1HKMQBGFLFIJRHJVPR4BI4CJ0VQIN4PHGZ&client_secret=VXRH3J0QWAJKGIPHMEIOWWR3YSADCO3S2IJQMS3BNVEDFYUE&v=20130815&ll=40.7,-74&query=' + search + '&near=' + currentLocation
// https://api.foursquare.com/v2/venues/explore/?client_id=AL4DDIM5HHXXYV1HKMQBGFLFIJRHJVPR4BI4CJ0VQIN4PHGZ&client_secret=VXRH3J0QWAJKGIPHMEIOWWR3YSADCO3S2IJQMS3BNVEDFYUE&v=20130815&ll=29.9407336,-90.0820647&radius=200
$scope.joinChat = function(id, name) {
if ($cookies.get('id')) {
$rootScope.venue = name;
$rootScope.id = id;
$http({
method: 'GET',
url: 'https://api.foursquare.com/v2/venues/' + id + '/photos?client_id=AL4DDIM5HHXXYV1HKMQBGFLFIJRHJVPR4BI4CJ0VQIN4PHGZ&client_secret=VXRH3J0QWAJKGIPHMEIOWWR3YSADCO3S2IJQMS3BNVEDFYUE&v=20130815&ll=40.7,-74&limit=5'
}).then(function successCallback(response) {
$rootScope.photos = response.data.response.photos.items;
});
UserService.joinchat(id).success(function(data) {
$location.path("/chatroom");
});
} else {
$location.path("/login");
}
};
}
}
]);
Here is the controller for the chatroom template:
angular.module('thesis.chatroom', ['luegg.directives', 'emoji', 'vkEmojiPicker', 'mgcrea.ngStrap'])
.controller('ChatroomController', ['$scope', '$location', '$window', '$cookies', '$rootScope', '$http', 'UserService', 'chatSocket',
function AdminUserCtrl($scope, $location, $window, $cookies, $rootScope, $http, UserService, chatSocket) {
if (!$cookies.get('id')) {
$location.path("/login");
} else {
$scope.users = [];
$scope.messages = [];
$scope.id = $rootScope.id;
var chatId = $scope.id;
$rootScope.id = null;
chatSocket.emit('joinedChat', {
chatId: $scope.id
});
chatSocket.on('message', function(data) {
console.log(data);
$scope.messages = data.messages;
$scope.users = data.users;
});
$scope.$on('$destroy', function() {
if ($scope.users.length === 1) {
chatSocket.emit('DestroyChat', {
idChatroom: chatId,
idUser: $cookies.get('id')
});
chatSocket.removeListener();
} else {
chatSocket.emit('leaveChat', {
idUser: $cookies.get('id')
});
chatSocket.removeListener();
}
});
$scope.createMSG = function(msg) {
if ($cookies.get('id')) {
UserService.createMSG(msg, chatId, $cookies.get('id')).then(function(data) {});
$scope.message = "";
} else {
$location.path("/login");
}
};
}
}
]);
current result:
All images show up, but cannot figure out the angular slider
Any suggestions/tips/criticisms are always appreciated. Thank you in advance!

Books Won't Display for Reader App Exercise

I'm trying to get books to display based on the assignment above but can't figure out what is wrong for the life of me.
I built the service and modified the controller and view pages to the point where I believe they should display the books in the view, but I'm just seeing a blank page.
I feel like I am probably not retrieving the data properly and accessing it in the view/html.
Any ideas? Link to jsFiddle.
Index.html
<body ng-app="ReaderApp">
<div class="header">
<div class="container">
Reader
</div>
</div>
<div class="main">
<div class="container">
<div ng-view></div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/BookshelfController.js"></script>
<script src="js/controllers/BookController.js"></script>
<script src="js/controllers/ChapterController.js"></script>
<!-- Services -->
<script src="js/services/books.js"></script>
</body>
js/apps.js
var app = angular.module('ReaderApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/books', {
controller: 'BookshelfController',
templateUrl: 'views/bookshelf.html'
})
.otherwise({
redirecTo: '/books'
});
});
js/services/books.js
app.factory('books', ['$http', function($http) {
return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/books-api/books.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
js/controllers/BookshelfController
app.controller('BookshelfController', ['$scope', 'books', function($scope, books) {
books.success(function(data) {
$scope.myBooks = data;
});
}]);
js/views/bookshelf.html
<div class="bookshelf row">
<!--
TODO: Loop through myBooks and display each one with this HTML
<div class="book col-md-3">
<a href="#/books/{{$index}}">
TODO: Add the book's cover here
<h3 class="title"> </h3>
<p class="author"> </p>
</a>
</div>
-->
<div class="book col-md-3" ng-repeat="book in myBooks">
<a href="#/books/{{$index}}">
<img ng-src="{{ book.cover }}">
<h3 class="title">{{ book.title }}</h3>
<p class="author">by {{ book.author }}</p>
</a>
</div>
</div>

I think I had the same trouble and my problem was in the router. Try adding array brackets ( [ ] ) and the '$routeProvider' string in your config method (app.js) like this:
app.config(['$routeProvider', function($routeProvider) {
// Normal router stuff goes here
}]);
Coming from Ember, the syntax is a little weird so I've been using this tutorial as reference when I get stuck.