I am new to angularjs. I am working on a project in which I have three html files index.html for ng-view, home.html for displaying various products, these products are coming from the database. I am able to get products from the database and able to display these products on home.html. Each product in home.html will be a link for the product.html page. Product.html page is for displaying details of a single product.
My problem is when I click first time on the product in home.html, product.html page is displaying blank. In next click on any product in home.html, product.html page showing previous click data. This pattern is happening on every click, showing just previous click data.
home.html is -
<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 is -
<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 is -
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
};
});
Please let me know, What could be the solution.
