我是angularjs的新手。我正在一个项目中,其中有三个用于ng-view的html文件index.html,用于显示各种产品的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
};
});
请让我知道,什么是解决方案。
您不必同时使用ng-click
和href来重定向到新页面。坚持一个。我建议您删除href并通过和进行重定向$location
。
<a style="cursor: pointer; margin-top: 5px;" ng-click="getProductById(products[$index].product_Url)">View Product Details and Buy Options</a>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句