Recently, I started working with angularjs on a new project that involves three main HTML files. The first file is index.html, which contains the ng-view directive. The second file is home.html, where various products are displayed from a database. Each product listed on home.html functions as a link to another page called product.html, which provides detailed information about a single product.
However, I encountered an issue where clicking on a product in home.html for the first time would display a blank product.html page. Subsequent clicks on different products in home.html only showed data from the previous click. This pattern continued with each new click, displaying data from the previous selection rather than the current one.
The structure of home.html is as follows:
<div ng-controller="productController" class="homeMainDiv">
<!-- Product DIV Start -->
<div data-ng-init="onloadFun()">
<div>
<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>The product.html page looks like this:
<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>Finally, here's a snippet from 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 = {};
// More code included...
});
gelovenIndia.service('productService', function() {
console.log("2");
var product;
// More code included...
});If anyone has insights or solutions regarding this issue, please share them. Thank you.