I have a collection of items. Each item has buttons to display its details and comments within this ng-view section.
It is necessary for the user to view all available product details on one page, for example.
Below is the HTML list:
<div ng-controller="ProductsApp">
<ul>
<li ng-repeat="product in products">
<p>{{product.Name}}</p>
<p>
<a href="#/details/{{product.Id}}">Details</a>
<a href="#/comments/{{product.Id}}">Comments</a>
</p>
<div ng-view="productView{{product.Id}}">
</div>
</li>
</ul>
</div>
Next is my routing setup:
angular
.module('ProductsApp',[])
.config(function ($routeProvider) {
$routeProvider.
when('/details/:productId', {
controller : DetailsCtrl,
templateUrl : 'Details.html',
view: 'productView:productId'
}).
when('/comments/:productId', {
controller : CommentsCtrl,
templateUrl : 'Comments.html',
view: 'productView:productId'
}).
This is my controller function:
function DetailsCtrl ($scope, $window, $http, DetailsList) {
var productId = $routeParams.productId;
$scope.Details[productId] = DetailsList.get({'productId' : productId});
}
Finally, the Details.html looks like this:
<div>
Name: {{Details[productId].Name}}
Size: {{Details[productId].Size}}
...
</div>
I have two questions regarding this implementation:
- Is this the correct approach? Are there alternative methods?
- How can I retrieve the productId for the current ng-view? Name: {{Details[productId].Name}}
Thank you!!!