I am creating a basic slider using HTTP service from a local JSON file. Everything works if I don't use ui.router, when implementing ui.router, routing is working but the slider(next, previous button) is not changing the data .I have my route.js and controller.js below is my code. i consoled object and is logging. but not throwing any error scope.showprice,showavail etc and see the data changing in the log. but not in the ui view.
app.controller('myctrl',function ($scope,$http) {
$scope.productpage =" Product Page";
$scope.gcpro =" Gc-pro Page";
$scope.lessons =" Lessons Page";
$scope.outlet =" Outlet Page";
$scope.platinum ="The platinum Page";
$scope.rental =" Rental Page";
$scope.repairs =" Repairs Page";
$scope.usedgear ="Usedgear Page";
$scope.vintage =" Vintage Page";
var jdata=0;
var ctrl =this;
$scope.reveal= function (){
$scope.showsub=true;
}
$scope.notreveal= function(){
$scope.showsub=false;
}
$http.get("../json/myJson.json")
.then(function(response) {
ctrl.sdata = response.data;
console.log(ctrl.sdata);
$scope.showprice = ctrl.sdata.allProducts[0].price;
$scope.showavail = ctrl.sdata.allProducts[0].stockavailability;
$scope.showdescribe= ctrl.sdata.allProducts[0].discription;
$scope.showreview = ctrl.sdata.allProducts[0].custmerreviews;
$scope.showimage = ctrl.sdata.allProducts[0].image;
});
$scope.slider= function (i) {
$http.get("../json/myJson.json")
.then(function(response) {
ctrl.sdata = response.data;
jdata = jdata+i;
if (jdata < 0) {
jdata = ctrl.sdata.allProducts.length - 1;
}
if (jdata > ctrl.sdata.allProducts.length - 1) {
jdata = 0;
}
$scope.showprice = ctrl.sdata.allProducts[jdata].price;
$scope.showavail = ctrl.sdata.allProducts[jdata].stockavailability;
$scope.showdescribe = ctrl.sdata.allProducts[jdata].discription;
$scope.showreview = ctrl.sdata.allProducts[jdata].custmerreviews;
$scope.showimage = ctrl.sdata.allProducts[jdata].image;
console.log($scope.showprice);
})
}
});app.config(function ($stateProvider,$urlRouterProvider, $locationProvider
) {
$urlRouterProvider.otherwise('/home')
$stateProvider.state('home',
{
url: '/home',
templateUrl: '../html/home.html',
controller: 'myctrl'
})
.state('products',
{
url: '/products',
templateUrl: '../html/products.html',
controller: 'myctrl'
})
.state('gcpro',
{
url: '/gcpro',
templateUrl: '../html/gcpro.html',
controller: 'myctrl'
})
.state('lessons',
{
url: '/lessons',
templateUrl: '../html/lessons.html',
controller: 'myctrl'
})
.state('outlet',
{
url: '/outlet',
templateUrl: '../html/outlet.html',
controller: 'myctrl'
})
.state('platinum',
{
url: '/platinum',
templateUrl: '../html/platinum.html',
controller: 'myctrl'
})
.state('rental',
{
url: '/rental',
templateUrl: '../html/rental.html',
controller: 'myctrl'
})
.state('repairs',
{
url: '/repairs',
templateUrl: '../html/repairs.html',
controller: 'myctrl'
})
.state('usedgear',
{
url: '/usedgear',
templateUrl: '../html/usedgear.html',
controller: 'myctrl'
})
.state('vintage',
{
url: '/vintage',
templateUrl: '../html/vintage.html',
controller: 'myctrl'
})
})<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../css/css.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="//unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script>
</head>
<body >
<div id="wraper" >
<div id="header">
<img src="../images/guitar1.png" id="topscreenshot" >
<input type="text" id="topinput" placeholder="Enter keywords, Item # or Catalog #">
</div>
<div id="mainpage" ng-controller="myctrl as ctrl">
<div id="navbardiv">
<span id="allnavbars" ng-mouseenter="reveal()" ng-mouseleave="notreveal()">
<a ui-sref ="home"><button class="navbarbuttons">Home</button></a>
<a ui-sref ="products"><button class="navbarbuttons">Product</button></a>
<a ui-sref ="usedgear"><button class="navbarbuttons">Used Gear</button></a>
<a ui-sref ="platinum"><button class="navbarbuttons">Platinum</button></a>
<a ui-sref ="vintage"><button class="navbarbuttons">Vintage</button></a>
<a ui-sref ="outlet"> <button class="navbarbuttons">Outlet</button></a>
<a ui-sref ="gcpro"> <button class="navbarbuttons">GC Pro</button></a>
<a ui-sref ="lessons"><button class="navbarbuttons">Lessons</button></a>
<a ui-sref ="repairs"><button class="navbarbuttons">Repairs</button></a>
<a ui-sref ="rental"><button class="navbarbuttons">Rentals</button></a>
</span>
</div>
<div id="undernavbargrey">
<span id="dropdownspan" ng-show="showsub" >
<a href="#" class="anchorsss">Guitars</a>
<a href="#" class="anchorsss">Bass</a>
<a href="#" class="anchorsss">Amps Effects</a>
<a href="#" class="anchorsss">Drums</a>
<a href="#" class="anchorsss">Recording</a>
<a href="#" class="anchorsss">Software</a>
<a href="#" class="anchorsss">keyboards MIDI</a>
<a href="#" class="anchorsss">Mics Wireless</a>
<a href="#" class="anchorsss">Live Sound</a>
<a href="#" class="anchorsss">DJ</a>
<a href="#" class="anchorsss">Lighting</a>
<a href="#" class="anchorsss">Accessories</a>
<a href="#" class="anchorsss">Band Orchestra</a>
</span>
</div>
<div id="greyline"></div>
<div id="leftpadamdiv"> <img src="../images/left.png" id="leftpadam" ng-click="slider(-1)" ></div>
<div id="rightpadamdiv"><img src="../images/right.png" id="rightpadam" ng-click="slider(1)" ></div>
</div>
<div ui-view>
</div>
<div id="therestdiv">
<img src="../images/therest.png" id="therestpic">
</div>
</div>
<script src = "../script/module.js"></script>
<script src="../script/controller.js"></script>
<script src="../script/route.js"></script>
<script src="../script/cdirective.js"></script>
</body>
</html>
ui-routeryou are using? – Sravan Jan 16 at 5:08$http.get("../json/myJson.json")this file is getting called? check network tab once. – Sravan Jan 16 at 7:05