我想展示一个带有产品详细信息的模态,但它没有弹出。我有状态路由控制器,产品控制器和产品列表页面以及产品详细信息页面。我的html和产品详细信息控制器的路由详细信息如下,
路由控制器 -
.state('laptopdetails', {
url:'/barbar/:productid',
templateUrl: '/Selection_Routing/Selection_Product/ProductDetails.html',
controller: 'ProductDetailsController'
})
产品列表页面和产品详细信息控制器:
var app = angular.module('pageRoutingApp');
app.controller('ProductDetailsController', ['$scope', '$http', '$stateParams', '$uibModal', '$log', function ($scope, $http, $stateParams, $uibModal, $log) {
//Open a modal to view product details..
this.productdetails = function (size, selectedproduct) {
var temp= selectedproduct;
var modalInstance = $uibModal.open({
templateUrl: '/Selection_Routing/Selection_Product/ProductDetails.html',
controller: function ($scope, $uibModalInstance, product) {
$scope.product = product;
},
size: size,
resolve: {
product: function () {
return selectedproduct;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
}]);
<div class="row">
<div class="col-sm-6 col-md-3" ng-repeat="product in SiteProduct | filter:{ SubCategoryID: 1 }">
<div class="thumbnail">
<div class="caption">
<h3>{{product.ProductName}}</h3>
<p>{{product.ProductDescription}}</p>
<h4>{{product.Price}} kr</h4>
<p><a ng-click="ProductDetailsController.productdetails('lg', product)" class="btn btn-primary" role="button">Details</a> <a ui-sref="#" class="btn btn-default" role="button">Buy</a></p>
</div>
</div>
</div>
</div>