Javascript angularjs 1中从控制器到Html的数据传输

我对angularjs是新手。我正在从事一个项目，其中我有三个html文件index.html用于ng视图，home.html用于显示各种产品，这些产品来自数据库。我能够从数据库中获取产品，并能够在home.html上显示这些产品。home.html中的每个产品都是product.html页面的链接。Product.html页面用于显示单个产品的详细信息

我的问题是，当我第一次单击home.html中的产品时，product.html页面显示为空白。在home.html中的任何产品的下一次单击中，product.html页面显示上一次单击的数据。这种模式在每次单击时都会发生，只显示以前的单击数据

home.html是-

<div ng-controller="productController" class="homeMainDiv">

    <!-- Product DIV Start -->
    <div data-ng-init="onloadFun()">
        <div>
        <!-- 
        <div id="product" ng-repeat="product in products">

            <table>
                <tr>
                    <td>
                        <a target="_blank" href={{product.product_Url}}>
                            <img src="{{product.product_Url}}" style="width:150px">
                        </a>
                    </td>
                </tr>
            </table>
            -->
            <table style="width:100%">
                <tr ng-repeat="product in products" ng-switch on="$index % 3">
                  <td ng-switch-when="0">

                    <a target="_blank" href={{products[$index].product_Url}}>
                            <img src="{{products[$index].product_Url}}" style="width:150px">
                    </a>
                    <a href="#product" style="cursor: pointer; margin-top: 5px;" ng-click="getProductById(products[$index].product_Url)">View Product Details and Buy Options</a>
                  </td>
                  <td ng-switch-when="0">
                    <span ng-show="products[$index+1]">

                      <a target="_blank" href={{products[$index+1].product_Url}}>
                            <img src="{{products[$index+1].product_Url}}" style="width:150px">
                     </a>
                     <a href="#product" style="cursor: pointer; margin-top: 5px;" ng-click="getProductById(products[$index+1].product_Url)">View Product Details and Buy Options</a>

                    </span>
                  </td>
                  <td ng-switch-when="0">
                    <span ng-show="products[$index+2]">    
                      <a target="_blank" href={{products[$index+2].product_Url}}>
                            <img src="{{products[$index+2].product_Url}}" style="width:150px">
                      </a>
                      <a href="#product" style="cursor: pointer; margin-top: 5px;" ng-click="getProductById(products[$index+2].product_Url)">View Product Details and Buy Options</a>

                    </span>
                  </td>
                </tr>
            </table>

        </div>
    </div>
</div>

<div ng-controller="productController">
    <div style="margin-top: 307px;">
        <h1>Hello Product</h1>
        <img src="{{productById.product_Url}}" style="width:150px">
        <br>
        <a href="#">View Product Details and Buy Options</a>
    </div>
    </div> 

---

请告诉我，解决方案是什么。

您不必同时使用ng click和href重定向到新页面。坚持一个。我建议您删除href并通过函数调用和$location重定向

---

使用ng href而不是href，并将您的ng href包含在@Vivz中：我尝试使用ng href，但无效。更改后的代码类似于-您使用的是什么版本的angularjs？我认为href可能不正确。您可以尝试使用$location.path重定向到product.html。你可以检查这个@vivz:我使用的是angularjs 1.6.4。对于重定向，我只使用$location.path。它类似于$location.path'/product'；如果您使用ng click和$location进行重定向，则此行不需要href

var gelovenIndia = angular.module('apparel', ['ngRoute']);

    gelovenIndia.config(function ($routeProvider,$locationProvider) {
        console.log("In config");
        $locationProvider.hashPrefix('');
        $routeProvider

     // route for the home page
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'productController'
        })

        // route for the your story page
        .when('/product', {
            templateUrl : 'pages/product.html',
            controller  : 'productController'
        });

    });

    gelovenIndia.controller('productController', function($scope, $http, $location, productService) {
         console.log("In productController");
         $scope.product = {};

         //console.log("$scope.products", $scope.products);

          $scope.productById = productService.getProduct();
          console.log('Product in productController', $scope.productById);

          $scope.onloadFun = function() {
                alert(1);
                console.log("In Onload Function");
                $http({
                    method : 'GET',
                    url : 'productData',
                    data : angular.toJson($scope.userform),
                    headers : {
                        'Content-Type' : 'application/json'
                    }
                }).then(function(response) {
                    alert("Got response for Product Data");
                    console.log("Got response for Product Data:", response.data);
                    $scope.products = response.data;
                    console.log("onloadFun - $scope.products", $scope.products);
                });
            };

            $scope.getProductById = function(URL) {
                alert("Product URL is :"+URL);
                //$scope.productById = productService.getProduct();
                console.log('In getProductById');
                $scope.product.product_Url = URL;
                console.log($scope.product);
                $http({
                    method : 'POST',
                    url : 'productData',
                    data : angular.toJson($scope.product),
                    headers : {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then(function(response) {
                    alert("Got response for Product");
                    console.log("response in getProductById", response.data);
                    $scope.productById = response.data;
                    productService.addProduct(response.data);
                    $location.path('/product');
                    //$window.location.href = '/product';
                    console.log("10");

                });
            };

        });


    gelovenIndia.service('productService', function() {
        console.log("2");
          var product;

          var addProduct = function(newObj) {
              console.log("3");
              console.log("adding product to service", newObj);
              product = newObj;
          };

          var getProduct = function(){
              console.log("4");
              console.log("getting product from service", product);
              return product;
          };

          return {
              addProduct: addProduct,
              getProduct: getProduct
          };

        }); 

<a style="cursor: pointer; margin-top: 5px;" ng-click="getProductById(products[$index].product_Url)">View Product Details and Buy Options</a>