Угловой слайдер с использованием данных $ http и ui.router не меняется

Question

Я создаю базовый слайдер, используя HTTP-сервис из локального файла JSON. Все работает, если я не использую ui.router, при реализации ui.router маршрутизация работает, но слайдер (следующая, предыдущая кнопка) не меняет данные. У меня есть мои route.js и controller.js ниже мой код. я утешал объект и регистрирую. но не бросать никаких ошибок scope.showprice, showavail и т. д. и видеть изменения данных в журнале. но не в представлении ui.

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>

Answer 1

Первый номер, который вы опубликовали, является проблемой с вашей версией ui-router. Обновите версию ui-router, так как ваша текущая версия не обрабатывает transition.

Here is the reference for that issue

Для второго вопроса, проверьте, что файл Json становится называется,

использование $resource для извлечения данных из файла JSON.

$scope.slider= function (i) { 
    $resource('app/data.json', {}, { 
     query: { 
     method: 'GET', 
     } 
    }) 
    .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); 
    }) 
} 

Dont forget to add ngResource in the module.

Edit: Я предпочитаю, чтобы добавить api звонков и data json звонков в отдельной службе.

Вот пример такого сервиса:

(function(myApp) { 
    'use strict'; 

     myApp.factory('DataService',DataService); 

     function DataService($resource) 
      { 
      return $resource('app/data.json', {}, { 
       query: { 
       method: 'GET', 
      } 
     }); 
    } 
})(myApp); 

home.html:

<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> 
......... 
........ 
// your remaining code 

Index.html

<!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"> 
    <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 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> 

Проверка я удалил контроль ler in index.html