Question

我正在使用本地JSON文件中的HTTP服务创建一个基本滑块。如果我不使用ui.router，一切正常，在实施ui.router时，路由工作正常，但滑块（下一个，上一个按钮）没有更改数据。我有route.js以下controller.js是我的代码。我安慰对象并正在记录。但不抛出任何错误scope.showprice，showavail等，并查看日志中的数据更改。但不是在ui视图中。

＆＃13;

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

＆＃13;

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'


            })

})

＆＃13;

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

＆＃13;

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 {1}}

修改：我更愿意在单独的服务中添加in the module.来电和api来电。

以下是此类服务的示例：

data json

<强> Home.html中：

(function(myApp) {
    'use strict';

        myApp.factory('DataService',DataService);

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

<强>的index.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中删除了控制器

Angular Slider使用$ http和ui.router数据不变

1 个答案: