在角度 UI 路由器中单击时重定向到相应的单个产品页面
Posted
技术标签:
【中文标题】在角度 UI 路由器中单击时重定向到相应的单个产品页面【英文标题】：Redirect to a respective single product page on click in angular UI router 【发布时间】：2017-01-09 05:50:15 【问题描述】：在我的主页中，如果我单击特定产品图像，我现在将获取从 JSON 获取的所有产品，它应该重定向到单独显示相应产品的另一个页面。我知道应该在 singleproductcontroller 进行更改，但我不知道如何。这是我的json链接 JSon link
<html>
<head>
<title>Fad Street Den</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.4/angular-ui-router.js"></script>
<body cz-shortcut-listen="true">
<div>
name
<div ui-view="header"></div>
<div ui-view="content"></div>
</div>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="services.js"></script>
</body>
</html>
App.js 文件
var app=angular.module('myApp', ['ui.router']);
app.config(function($stateProvider,$urlRouterProvider)
$stateProvider
.state('home',
url:'/',
views:
'header':
templateUrl:"header.html"
,
'content':
templateUrl:"body.html",
controller:"productscontroller"
)
.state('home.product',
url:'products/:id',
views:
'content@':
templateUrl:"product.html",
controller:"singleproductcontroller"
)
$urlRouterProvider.otherwise('/');
)
控制器.JS
var app=angular.module('myApp');
app.controller('productscontroller', ['$scope','productservice',function($scope,productservice)
$scope.name="kannan";
productservice.productlists().then(function(response)
$scope.ans=response.data;
console.log($scope.ans);
,function(response)
console.log(response.status);
return response.status;
);
]);
app.controller('singleproductcontroller', ['$scope','$stateParams','productservice',function($scope,$stateParams,productse rvice)
productservice.productlists().then(function(response)
console.log($stateParams.id);
var id=$stateParams.id;
$scope.fullproducts=response.data;
console.log($scope.fullproducts=response.data[$stateParams.id])
$scope.products=$scope.fullproducts[$stateParams.id]
console.log($scope.products);
,function(response)
console.log(response.status);
return response.status;
);
])
标题.HTML
<body ng-app="myApp" ng-controller="productscontroller">
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="home">Home</a></li>
<li><a ui-sref="home">Home</a></li>
</ul>
</body>
正文.html
<body ng-app="myApp" ng-controller="productscontroller">
<div>
<div style="height: 200px;" ng-repeat="x in ans">
<img style="width: 100px;height: 100px;float: left;" class="img-responsive"
ng-src="x.imageURL1">
<h1>x.color</h1>
<p>x.brand</p>
<p>x.gender</p>
</div>
</div>
</body>
产品.html
<body ng-controller="singleproductcontroller">
<div>
<div style="height: 200px;">
<img style="width: 100px;height: 100px;float: left;" class="img-responsive" ng-src="x.imageURL1">
<h1>products.color</h1>
<p>products.brand</p>
<p>products.gender</p>
</div>
</div>
</body>
【问题讨论】：
【参考方案1】：您应该将 ui-sref 指令添加到图像中。它将带您进入产品状态。是这样的：
<div ng-repeat="x in ans">
<a ui-sref="home.product(id: x.id)"><img ></a>
<div>
【讨论】：
是的，伙计，我纠正了这一点，但我如何才能从服务（来自 JSON）中单独获取该特定 ID。这是我的服务 app.service('productservice', function($http) this.productlists=function(index) return $http.get("api.myjson.com/bins/5a403/:prodcutId") .success(function(data) return data; ) .error(function(data) return data; ); ); 你能写调用函数吗？我将通过 routeparams 获取特定 ID 我想知道如何获取该特定 ID 详细信息以上是关于在角度 UI 路由器中单击时重定向到相应的单个产品页面的主要内容，如果未能解决你的问题，请参考以下文章
如何使用Fullcalendar单击年份视图的相应月份单元格时重定向到月视图