Develop Reference

Vue.js How can i emit events between router-view components

I am building an e-commerce website using vue.js and an api as backend,
i have a root component called Main.vue
which had a navigation of router-link and a body of router-view.
in a route called Cart.vue when a user updated quantity of some product i need Cart.vue to $emit an event to the root component Main.vue to trigger a function called getCartTotal()
hint Cart.vue is not a child component of Main.vue
Main.vue :
<template>
<div>
<div>
<div v-on:getCartAgain="getCartTotal()" id="top-header" class="has-background-ishtari">
<div class="container" style="padding:5px 0">
<div class="is-hidden-mobile" style="font-size: 13px">
<div
class="has-text-white has-text-right"
style="display: flex;align-items: center;justify-content: flex-end"
>
<i class="icon material-icons" style="margin-right: 0px;">attach_money</i>
<span style="margin-right:15px">Best Deals</span>
<i class="icon material-icons" style="margin-right: 5px;">low_priority</i>
<span style="margin-right: 15px">Free & Easy Returns</span>
<i class="icon material-icons" style="margin-right: 5px;">local_shipping</i>
<span>Free Delivery (OVER $100)</span>
</div>
</div>
</div>
<div class="container" style="padding:10px 0">
<div style="display: flex;justify-content: space-between;align-items: center;">
<div id="header-logo" #click="openHomePage()">
<img src="../assets/images/logo-ishtari.png" class width="140" />
</div>
<div style="flex-grow: 2;margin:0 40px">
<p class="control is-expanded">
<input
id="header-search"
class="input is-radiusless"
style="height: 35px;"
type="text"
placeholder="What are you looking for?"
/>
</p>
</div>
<div
class="has-text-white"
style="display: flex;align-items: center;justify-content: space-between"
>
<div style="display: flex;align-items: center;padding-right:10px">
<span>Login Or SignUp</span>
<i class="icon material-icons">arrow_drop_down</i>
</div>
<div
id="cart-container"
style="display: flex;align-items: center;padding-left: 15px;border-left:1px solid rgba(255,255,255,0.5)"
#click="openCartPage()"
>
<span style="margin-right:5px">Cart</span>
<span>
<i class="icon material-icons">shopping_cart</i>
<span
class="has-background-ishtari-blue is-paddingless"
:class="this.cartCount.length == 0 ? 'button is-loading' : ''"
id="cart-total"
>{{this.cartCount}}</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<vue-page-transition name="fade-in-right">
<router-view></router-view>
</vue-page-transition>
</div>
</template>
<script>
import VueCookies from "vue-cookies";
export default {
data() {
return {
showNav: false,
cartCount: "",
readyToken: false
};
},
created() {
this.checkToken();
},
mounted() {
this.getCartTotal();
},
methods: {
openCartPage() {
this.$router.push({ name: "cart" }).catch(err => {
return err;
});
},
openHomePage() {
this.$router.push({ name: "home" }).catch(err => {
return err;
});
},
checkToken() {
if (!VueCookies.isKey("token")) {
let requestBody = {
client_id: "shopping_oauth_client",
client_secret: "shopping_oauth_secret"
};
let requestHeader = {
"Content-Type": "application/x-www-form-urlencoded",
Authorization:
"Basic c2hvcHBpbmdfb2F1dGhfY2xpZW50OnNob3BwaW5nX29hdXRoX3NlY3JldA",
"Access-Control-Allow-Origin": "*",
"Cache-Control": null,
"X-Requested-With": null
};
window.axios
.post(window.main_urls["get-token"], requestBody, {
headers: requestHeader
})
.then(response => {
VueCookies.set("token", response.data.access_token);
});
} else {
console.log(VueCookies.get("token"));
}
},
getCartTotal() {
console.log("here");
let requestHeader = {
Authorization: "Bearer " + VueCookies.get("token"),
"Access-Control-Allow-Origin": "*",
"Cache-Control": null,
"X-Requested-With": null
};
window.axios
.get(window.main_urls["get-cart"], { headers: requestHeader })
.then(response => {
if (response.data.error === "Cart is empty") {
console.log(response.data);
this.cartCount = 0;
} else {
this.cartCount = response.data.data.products.length.toString();
}
});
}
}
};
</script>
<style>
</style>
And Cart.vue :
<template>
<div class="has-background-ishtari-grey">
<div class="container">
<div>
<section v-if="this.loading || this.emptyCart" class="hero is-fullheight-with-navbar">
<div
v-if="this.loading"
class="button is-loading hero is-fullheight-with-navbar has-background-ishtari-grey"
style="border: none"
>Please Wait</div>
<div v-if="! this.loading && this.emptyCart" class="hero-body">
<div class="container has-text-centered">
<i class="material-icons has-text-grey" style="font-size: 80px">shopping_cart</i>
<h1 class="title has-text-grey has-text-weight-bold is-4">Your Shopping Cart Is Empty</h1>
<h2 class="subtitle title has-text-grey is-6">what are you waiting for</h2>
<br />
<button
#click="goHome()"
class="button is-ishtari-blue is-outlined has-text-weight-bold is-7"
>START SHOPPING</button>
</div>
</div>
</section>
</div>
<div class="section" v-if="! this.loading && !this.emptyCart">
<div class="columns is-bordered" id="cart-products-container">
<div class="column is-9" style="margin-right:20px">
<h1
class="subtitle has-text-weight-bold is-4"
>My Cart ({{this.cartData.products.length}} items)</h1>
<img
src="https://storage.googleapis.com/noon-cdn-res/rn/banners/en_disclaimer-cart-desktop.gif"
style="margin-bottom:15px"
/>
<div
class="cart-product-row has-background-white"
style="padding:10px 15px"
v-for="product in cartData.products"
:key="product.product_id"
>
<div
class="columns padding-top:20px"
:class="product.stock ? '' : 'has-background-danger'"
>
<div class="image is-128x128 column is-narrow">
<img :src="product.thumb" />
</div>
<div
class="column"
style="display:flex;flex-direction:column;justify-content:space-between"
>
<p
class="has-text-grey subtitle is-7 is-marginless"
style="margin-bottom:10px !important"
>{{product.model}}</p>
<p class="has-text-weight-bold" style="font-size:14px">{{product.name}}</p>
<p>
<i #click="product.quantity = 0;updateCartQuantity(product.key,0)" class="material-icons has-text-grey" id="cart-delete">delete</i>
</p>
</div>
<div
class="column is-narrow"
style="padding-left:15px;display:flex;flex-direction:column;justify-content:center"
>
<p class="has-text-weight-bold">{{product.price}}</p>
</div>
<div
class="column is-narrow"
style="display:flex;flex-direction:column;justify-content:center"
>
<div class="field has-addons">
<p class="control">
<a
#click="product.quantity = Number(product.quantity) - 1;updateCartQuantity(product.key,product.quantity)"
class="button"
>-</a>
</p>
<p class="control">
<input
class="input has-text-centered"
type="text"
placeholder="0"
style="width:80px"
readonly
:value="product.quantity"
:ref="product.product_id"
/>
</p>
<p class="control">
<a
class="button"
#click="product.quantity = Number(product.quantity) + 1;updateCartQuantity(product.key,product.quantity)"
>+</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="column is-narrow" style=" align-self:flex-start;margin-top:10px">
<div style="border:1px solid #eee; background:#f7f9fe; padding:20px 15px">
<div class="field has-addons">
<p class="control">
<input class="input is-ishtari-green" type="text" placeholder="Coupon Code" />
</p>
<p class="control">
<a class="button is-ishtari-green">Apply</a>
</p>
</div>
<div class="columns">
<div class="column">
<p class="has-text-weight-bold">Order Summary</p>
</div>
</div>
<div class="columns"></div>
<div v-for="total in cartData.totals" :key="total.code">
<div class="columns">
<div class="column">
<p>{{total.title}}</p>
</div>
<div class="column is-narrow">
<p>{{total.text}}</p>
</div>
</div>
</div>
</div>
<button
class="button is-ishtari-blue has-text-weight-bold"
style="display:block;width:100%;margin-top:10px"
>CHECKOUT NOW</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import VueCookies from "vue-cookies";
export default {
data() {
return {
cartData: [],
emptyCart: false,
loading: true
};
},
created() {
this.getCartContent();
},
methods: {
goHome() {
this.$router.push({ name: "home" }).catch(err => {
return err;
});
},
getCartContent() {
let requestHeader = {
Authorization: "Bearer " + VueCookies.get("token")
};
window.axios
.get(window.main_urls["get-cart"], { headers: requestHeader })
.then(response => {
if (response.data.error === "Cart is empty") {
this.emptyCart = true;
this.loading = false;
} else {
this.loading = false;
this.cartData = response.data.data;
}
});
},
updateCartQuantity(pkey, pquan) {
this.loading = true;
let requestHeader = {
Authorization: "Bearer " + VueCookies.get("token")
};
let requestBody = {
key: pkey.toString(),
quantity: pquan.toString()
};
window.axios
.put(window.main_urls["get-cart"], requestBody, {
headers: requestHeader
})
.then(response => {
if (response.data.success == "1") {
this.getCartContent();
this.$emit("getCartAgain");
}
});
},
}
};
</script>
<style scoped la>
.cart-product-row {
border-bottom: 1px solid #eee;
padding: 10px 0;
}
.cart-product-row:last-of-type {
border-bottom: none;
}
#cart-delete {
font-size: 20px;
cursor: pointer;
}
#cart-delete:hover{
transform: scale(1.05);
}
</style>
I need the function called updateCartQuantity() in Cart.vue to trigger the function called getCartTotal() in Main.vue

Vuex may be a bit more than you need here. You can just use the pub/sub technique by creating a simple file that exports a new vue instance, you can then listen to events emitted on that Vue instance:
//bus.js
import Vue from 'vue'
export default new Vue()
Then in your Main.vue you can import that:
import EventBus from '#/path/to/bus'
And in your created hook you can set up a listener:
created() {
EventBus.$on('refresh_cart_total', this.getCartTotal)
}
And you can $emit that event from your Cart.vue when you need to. Once again, import the bus:
import EventBus from '#/path/to/bus'
Then in your Cart.vue call it whenever you need:
EventBus.$emit('refresh_cart_total')
Now you have a bi-directional pub/sub system in place and you don't need to introduce Vuex for a simple task such as this.
Bonus
To keep things DRY you could also implement constants within your bus.js, such as:
export const REFRESH_CART_TOTAL = 'refresh_cart_total'
And now you can use import * as CART_CONSTANTS from '/path/to/bus' and use this method:
EventBus.$on(CART_CONSTANTS.REFRESH_CART_TOTAL, this.getCartTotal)
and:
EventBus.$emit(CART_CONSTANTS.REFRESH_CART_TOTAL)

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

how to call two time the same directive with the change in HTML belongs to the directive

I'm working on a project using angularJS material. I'm calling a directive(<sdiv-panel></sdiv-panel>) two time in a DOM but the problem is if I modify some element in the HTML of the directive, the second call of the same directive return a new HTML.
How can I solve this?
I'm looking for solutions that makes me call the directive with all the changes in the HTML page belongs to the directive that i call.
My code:
<md-content style="height:-webkit-calc(100% - 64px)" flex class="stop-scrolling" md-theme="{{vm.contentTheme}}" md-theme-watch="true">
<div style="height:-webkit-calc(50%)" layout="column" ng-repeat="cardrow in vm.cards" ng-show="vm.multipleview">
<div flex layout="row" layout-fill>
<md-card class="card" ng-repeat="card in cardrow" >
<md-toolbar style="min-height:35px; height:40px" class="md-hue-1" ng-dblclick="vm.openFromLeft()">
<div class="md-toolbar-tools">
<h1 >{{card.view.name }}</h1>
<md-menu >
<md-button ng-click="$mdOpenMenu($event)" class="md-icon-button" aria-label="More">
<i class="material-icons">more_vert</i>
</md-button>
<md-menu-content >
<md-menu-item ng-repeat="view in vm.views" >
<md-button ng-click="card.view=view" class="md-hue-2" >{{view.name}}</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</md-toolbar>
<md-card-content flex class="cardcontent" >
<sdiv-panel card={{card.view.element}} view={{card.name}}_4 >
</sdiv-panel>
</md-card-content>
</md-card>
</div>
</div>
<div ng-hide="vm.multipleview" >
<md-content layout-fill>
<md-tabs md-dynamic-height md-border-bottom >
<div ng-repeat="cardrow in vm.cards">
<md-tab ng-repeat="card in cardrow " label="{{ card.view.name }}">
<!--<md-tab ng-repeat="card in vm.tabtable " label="{{ card.name }}">-->
<md-content layout-fill="" flex="" style="margin-top: 10px" >
<div style="margin-bottom: 10px" >
<sdiv-panel card={{card.view.element}} view={{card.name}}_1 ></sdiv-panel>
</div>
</md-content>
</md-tab>
</div>
</md-tabs>
</md-content>
</div>
</md-content>

Here is my directive :
(function() {
'use strict';
angular.module('sdivMaterial.panel')
.directive(
'sdivPanel', function($compile) {
return {
restrict: "E",
replace: false,
scope : {
card: "#",
view:"#"
},
template: "",
link: function postLink($scope, $element, $attr) {
$attr.$observe('card', function(data) {
console.log("Updated data ", $scope.card, " : ", $scope.view);
var html = $scope.card;
$element.html(html);
$compile($element.contents())($scope);
}, true);
}
}
})
})();
an example of my main.html :
{{card.view.name }}
more_vert
{{view.name}}
-->

Here is my directive :
(function() {'use strict';
angular.module('sdivMaterial.panel')
.directive(
'sdivPanel', function($compile) {
return {
restrict: "E",
replace: false,
scope : {
card: "#",
view:"#"
},
template: "",
link: function postLink($scope, $element, $attr) {
$attr.$observe('card', function(data) {
console.log("Updated data ", $scope.card, " : ", $scope.view);
var html = $scope.card;
$element.html(html);
$compile($element.contents())($scope);
}, true);
}
}
})
})();

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!

ionic : inherit content from master to child

I am trying to inherit the blog contents from blog.html(list of cards) to news.html(single card) . I cant seem to get it working. Here is my config :
app.js
.controller('BlogCtrl', function($scope, $state, Posts) {
$scope.blogs = [];
Posts.success(function(response) {
var posts = response;
$scope.blogs = posts;
})
.state('app.news', {
url: "/news/:index",
views: {
'menuContent': {
templateUrl: "templates/news.html"
}
}})
BlogCtrl.js
$scope.monitor = function(index){
$state.go('app.news',{ index: index });
};
blog.html
<div ng-controller="BlogCtrl">
<div ng-repeat="blog in blogs | orderBy:'-created_at'" ng-click="monitor($index)">
<h4 class="title">{{blog.title}} </h4>
</div>
</div>
news.html
<ion-view view-title="{{blog.title}}">
<ion-content>
<div class="list card">
<div class="item">
<h3 ng-bind="{{blog.title}}"></h3>
<p ng-bind="{{blog.created_at}}"></p>
</div>
<div class="item item-body">
<img class="full-image" ng-src="{{blog.img}}">
<div ng-bind="{{blog.text}}"></div>
</div>
</div>
</ion-content>
</ion-view>