Question

当我点击我的应用中的“产品”时，它会使用网址（＃/ product / 123）来识别产品。

然后我使用.split函数告诉API从哪里提取单个产品详细信息。

它加载了第一项的数据，并且在我刷新浏览器之前数据不会改变。它就像它认为每个/ product /＃是同一页面。

我可以强制它重新加载路线的产品页面吗？也许有更好的解决方案。

我的部分路线：

        .state('product', {
            url: '/product/:id',
            views: {
                'menuContent': {
                    templateUrl: 'app/components/product/product.html',
                    controller : 'productsCtrl',
                    controllerAs : 'pro',
                    resolve : {
                        products : function productDetailsResolve ($stateParams, productsApi, $log) {
                            return productsApi.getApiData($stateParams.id)
                                .then(function (result) {
                                    return result.data;
                                })
                                .catch(function (err) {
                                    $log.error(err);
                                });
                        }
                    }
                }
            }
        })

“产品”页面的JS：

.factory('productsApi', ['$http', '$location',
    function($http, $location){
        var BASE_URL = 'http://localhost:8000/api/item/';
        var getApiData = function(product_id) {
            return $http.get(BASE_URL + product_id);
        };
        return {
            getApiData: getApiData
        };
    }]
)

.controller('productsCtrl', ['$scope', '$log', 'productsApi', 'UserService', 'products',
    function($scope, $log, productsApi, UserService, products) {
        var self = this;
        self.products = products;

        $scope.isVisible = function(name){
            return true;// return false to hide this artist's albums
        };

        // <======  Rewrite with accounts preferences
        productsApi.getApiData()
            .then(function (result) {
                console.log(JSON.stringify(result.data)) //Shows log of API incoming
                $scope.products = result.data;
            })
            .catch(function (err) {
                $log.error(err);
            });
    }
]);

产品HTML页面：

<ion-view name="product" hide-nav-bar="true">
    <ion-pane ng-controller="productsCtrl">

        <!--<ion-pane ng-controller="storesCtrl">-->


        <ion-content>

<div class="-""slidebox">

            <ion-slide-box show-pager="true" auto-play="true" does-continue="true">
                <!--<ion-slide ng-repeat="wardrobe in wardrobes">-->
                    <img style="width:100%" src="{{products.image}}">
                </ion-slide>
            </ion-slide-box>
            <div class="customback">
                <i class="ion-chevron-down" native-ui-sref="cards" native-ui-sref-opts="{reload: true}" native-options="{type: 'slide', direction:'down'}">
                </i>
            </div>
            </div>
            <center>
                    <h1>{{products.name}}</h1>
                    <br>
                    <P>${{products.price}}</p>
                    <br>
                    {{products.description}}</b>
        </ion-content>

Answer 1

这是工作代码。 ui-router，controller和factory代码现在位于同一个js文件中。如果你要将代码放在不同的文件中，那么在index.html中包含那些js文件。

var myapp = angular.module('myapp', ["ui.router"]);
 myapp.config(function($stateProvider, $urlRouterProvider){
  $stateProvider
    .state('product', {
        url: "/product/:id",
        templateUrl: "products.html",
        controller : 'productsCtrl',
        controllerAs : 'pro',
        resolve : {
            products : function productDetailsResolve ($stateParams, productsApi, $log) {
                    return productsApi.getApiData($stateParams.id)
                        .then(function (result) {
                            return result.data;
                        })
                        .catch(function (err) {
                            $log.error(err);
                        });
                }
        }
    })
});
myapp.factory('productsApi', ['$http', '$location',
function($http, $location){
    var BASE_URL = 'http://localhost:8000/api/item/';
    var getApiData = function(product_id) {
        return $http.get(BASE_URL + product_id);
    };
    return {
        getApiData: getApiData
    };
}]);
myapp.controller('productsCtrl', ['$scope', 'products',function($scope, products) {
          var self = this;
          self.products = products             
          // add rest of the controller code here
}]);

现在，您可以通过{{pro.products}}

简单地访问视图中的数据

Angular Routes-强制重新加载/动态URL中的新数据

1 个答案: