Question

我是angularJS的新手。我目前正在建立一个小型移动商店，我在首页显示所有产品的数据并点击项目，我想在下一页显示该产品的描述。

当我点击产品时，我能够使用值重定向到下一页。但问题是，我有一个名为＆＃39; productGallery＆＃39;它适用于首页（products-list.html），但它不适用于下一页（product.html）。

我的index.html

<div class="container">
<header>
<h1>My Mobile Store</h1>
</header>
<hr class="header-seperator">
<nav class="navbar navbar-default">
<div class="container-fluid">
 <div class="navbar-header">
    <a class="navbar-brand" href="#">My Mobile Store</a>
</div>
<div>
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Mobiles</a></li>
    <li><a href="#">Electronics</a></li>
    <li><a href="#">Fashions</a></li>
    <li><a href="#">Footwears</a></li>
  </ul>
  </div>
</div>
</nav>
<div ng-view></div>
</div>

我的app.js

(function() {
var storeConfig = function($routeProvider) {
$routeProvider
.when('/', {
    controller: 'StoreController',
    templateUrl: 'views/products-list.html',
    controllerAs: 'StreCtrl'
})
.when('/product', {
    controller: 'ProductController',
    templateUrl: 'views/product.html',
    controllerAs: 'prodCtrl'
});
};

var app= angular.module('mystore',['ngRoute','store-directives']).config(storeConfig);  
app.service('sharedProperties', function () {
    var product = [];

    return {
        getProduct: function () {
            console.log(product);
            return product;
        },
        setProduct: function(value) {           
            product = value;
            //console.log(product);
        }
    };
});

 app.controller('StoreController',[ '$http','$rootScope','sharedProperties', function($http,$rootScope,sharedProperties) {
 var store = this;
 $rootScope.products = [];
 store.error = "false";
 store.item = [];

 $http.get('data/products.json').success(function(data) {
    $rootScope.products = data;
 }).error(function() {
     store.error = "true";
 });

 store.showProduct = function(product) {
    sharedProperties.setProduct(product);
 };
 store.item = sharedProperties.getProduct();
 }]);


app.controller('ProductController',['$scope','$rootScope','$location','$routeParams', function($scope,$rootScope,$location,$routeParams) {
 $scope.product = $rootScope.products[$routeParams.id];
}]);

我的指示.js

var app = angular.module('store-directives',[]);

app.directive("productGallery", function() {
  return {
    restrict: 'E',
    templateUrl: "views/product-gallery.html"
  };

}）;

我的产品-list.html

<div class="row">
<div class="col-md-4" ng-hide="StreCtrl.error" ng-repeat="product in products | orderBy :'-price'">
<img class="img-product thumbnail" ng-show="product.images.length" ng-src={{product.images[0]}}  />
  <h3><a href="#/product/{{$index}}" ng-click="StreCtrl.showProduct(product)">{{product.name}} </a></h3>
  <p>{{product.price | currency}}</p>
  <p>{{product.description}}</p>
  <product-gallery></product-gallery>
</div>
</div>

我的product.html

<div class="row">
<h1> On Particular Product Page</h1>
<h3>{{product}}</h3>
    <product-gallery></product-gallery>
</div>

product-list.html中的工作，但不是product.html中的工作。我无法发现我正在做的错误。任何帮助都将不胜感激。

先谢谢!!

Answer 1

对不起！我认为问题在于浏览器缓存。

当我重新启动浏览器时，我发现一切正常。事实上，我没有将任何cookie存储到我的浏览器中，我发现这是一种奇怪的行为。

就像知道它与角度的常见或浏览器的问题一样。

Answer 2

我认为你给storeConfig的方式有误。您已将StoreController传递给两个url路径。应该是这样的：

var storeConfig = function($routeProvider) {
$routeProvider
.when('/', {
    controller: 'StoreController',
    templateUrl: 'views/products-list.html',
    controllerAs: 'StreCtrl'
})
.when('/product', {
    controller: 'ProductController',
    templateUrl: 'views/product.html',
    controllerAs: 'prodCtrl'
});
};

指令适用于一个控制器，但不适用于Angular JS中的其他控制器

2 个答案: