javascript - 使用 AngularJS 创建目录的详细信息页面

Question

我尝试学习如何使用 Angular 创建目录网站。我创建了一个包含许多产品的目录。当我点击其中一个产品时，我打算转到该所选产品的详细信息页面。

在我的 app.js 上

angular
.module('app', [
    'ui.router',
    'app.directives.productCard'
])
.config(['$urlRouterProvider','$stateProvider', function($urlRouterProvider, $stateProvider){
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('home',{
            url: '/',
            templateUrl:'templates/pages/home.html',
            controller: 'homeCtrl'
        })
        .state('about',{
            url: '/about',
            templateUrl:'templates/pages/about.html'
        })
        .state('product',{
            url: '/product',
            templateUrl:'templates/pages/product.html',
            controller: 'productCtrl'
        })
        .state('productDetails',{
            url: '/product/:id',
            templateUrl:'templates/pages/productDetails.html',
            controller: 'productDetailsCtrl'
        })
        .state('contact',{
            url: '/contact',
            templateUrl:'templates/pages/contact.html'
        })
}])

在我的服务产品上

angular
    .module('app')
    .factory('Product', ['$http', function($http){
        return{
            get: function(){
                return $http.get('/api/products.json').then(function(response){
                    return response.data;
                });
            }
        };
    }])

在我的指令.js

angular
    .module('app.directives.productCard',[])
    .directive('productCard', function(){
        return{
            restrict: 'A',
            scope:{
                item:'='
            },
            templateUrl: "templates/directive/product.html",
            controller:function($scope){
                console.log($scope.item);
            }
        };
    });

在产品 Controller 上

angular
    .module('app')
    .controller('productCtrl',['$scope', 'Product', function($scope,Product){
        $scope.title="List Product";
        Product.get().then(function(data) {
            $scope.products = data;
        });
        $scope.products=Product.get();
    }]);

在我的产品.html

<section class="product-outer-container">
    <section class="product-inner-container">
        <div class="container">
            <div class="row">
                <div ng-repeat="item in products">
                    <div data-product-card item="item"></div>
                </div>
            </div>
        </div>
    </section>
</section>

在我的指令 html 页面上

<div class="col-md-3 col-sm-6">
    <div class="card">
      <img class="card-img-top"  ng-src="{{item.image}}" alt="{{item.name}}">
      <div class="card-block">
        <strong class="card-title">{{item.name}}</strong>
      </div>
      <div class="card-block">
        <a href="#" class="card-link">Detail</a>
      </div>
    </div>
</div>

json 只包含这样的文件

[
      {
         "name":"one",    "image":"http://images.thenorthface.com/is/image/TheNorthFace/236x204_CLR/mens-better-than-naked-jacket-AVMH_LC9_hero.png",    
         "description":"Shop Now",
         "price":132,
         "qty":2
      },
      {
         "name":"two",         "image":"http://images.thenorthface.com/is/image/TheNorthFace/236x204_CLR/womens-better-than-naked-jacket-AVKL_NN4_hero.png",
         "description":"lorem ipsum dolor",
         "price":126,
         "qty":22
      }
]

当我想让按钮细节起作用时，我有点卡住了。我知道我错过了很多东西。在我的产品页面上，我只想显示图像和名称。但在详细信息页面上时，我打算显示该产品的所有数据。

Answer 1

我建议你做一些类似的事情，而不使用指令，并在参数中包含产品的 id。看下面的代码

var app = angular.module('plunker', ['ui.router']);
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World'; 
});
app.config(function($stateProvider){

  $stateProvider
  .state('home',{
        url: '/home',
        templateUrl:'listing.html',
        controller: 'productlistCtrl',
        param :{
          id: null


        }

    })
   .state('product',{
        url: '/product/:id',
        templateUrl:'product.html',
        controller: 'productCtrl',
        param :{
          id: null


        }

    })

});
app.controller('productlistCtrl', function($http,$scope) {
  $http.get('data.json').success(function(response){
    $scope.Data=response;
  console.log(response);

  })
  .error(function(){

    //error handling
  });
});
  app.controller('productCtrl', function($http,$stateParams,$scope) {
  console.log("REACHED HERE");
  $scope.productID= $stateParams.id;
  console.log($scope.productID);
});

您应该修改 json 以将 id 作为属性包含在其中

 [
      {
        "id"  :1,
         "name":"one",    "image":"http://images.thenorthface.com/is/image/TheNorthFace/236x204_CLR/mens-better-than-naked-jacket-AVMH_LC9_hero.png",    
         "description":"Shop Now",
         "price":132,
         "qty":2
      },
      {
        "id"  :2,
         "name":"two",         "image":"http://images.thenorthface.com/is/image/TheNorthFace/236x204_CLR/womens-better-than-naked-jacket-AVKL_NN4_hero.png",
         "description":"lorem ipsum dolor",
         "price":126,
         "qty":22
      }
]

您可以使用此导航到详细信息页面

 <a href="#/product/{{item.id}}" class="card-link">Detail</a>

可以获取 Controller 中点击的产品的详细信息

app.controller('productCtrl', function($http,$stateParams,$scope) {
      console.log("REACHED HERE");
      $scope.productID= $stateParams.id;
      console.log($scope.productID);
    });

这是 DEMO 的实时 plunker。