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

Question

当我在我的应用中点击“产品”时，它会使用 URL (#/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 文件中。如果您要将代码放在不同的文件中，则将这些 js 文件包含在 index.html 中。

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}} 访问视图中的数据