javascript - angularjs 1中从 Controller 到Html的数据传输

Question

我是 angularjs 的新手。我正在开发一个项目，其中我有三个 html 文件 index.html 用于 ng-view，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>

product.html 是 -

<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> 

script.js 是 -

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
          };

        }); 

请让我知道，可能的解决方案是什么。

Answer 1

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

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