Hello, I'm still learning AngularJS and facing an issue with the following code snippet.
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: "partials/home.html",
controller: "mainController",
})
.when('/products', {
templateUrl: "partials/productlist.html",
//controller: "ProductController",
})
.when('/product/:prodID', {
templateUrl: "partials/product.html",
controller: "viewController",
})
.when('/contact', {
templateUrl: "partials/contact.html",
controller: "contactController",
})
.otherwise({
redirectTo: "/"
});
});
app.controller('ProductController', function($scope, $http){
$http.get('partials/productTable.json').success(function(response){
$scope.datap = response.lists;
});
}).
controller('viewController',function($scope,$routeParams){
$scope.eachproduct = $scope.datap[$routeParams.prodID];
});
In my product.html page's code, you'll find:
<div ng-controller="viewController">
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li class="active">{{eachproduct.link}}</li>
</ol>
<div class="col-md-4">
<figure><img ng-src="{{ }}"></figure>
<p>
<a href="">Read More</a>
</p>
</div>
</div>
However, there seems to be a problem as the value of {{eachproduct.link}} doesn't display when navigating to any product page.
If anyone has a solution for this issue, I would greatly appreciate it. Thank you!