卡在角度相似的多个视图
问题描述:
美好的一天每个人!卡在角度相似的多个视图
我正在从事一个投资组合SPA,而我目前陷入困境。有没有办法只使用一个视图,并有动态的视图和链接变化? 这不是让这个html在路由中看到的每个视图都重复使用,只需使用一次HTML并使该视图中的数据即时更新?
HTML
<div class="container "ng-controller="mainCtrl">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">{{photos[0].name}}
</h1>
</div>
</div>
<!-- /.row -->
<!-- Portfolio Item Row -->
<div class="row">
<div class="col-md-8">
<img class="img-responsive" ng-src="{{photos[0].url}}" alt="daltonTower" >
</div>
<div class="col-md-4">
<h3>Project Description</h3>
<p>{{photos[0].description}}</p>
<h3>Project Details</h3>
<ul ng-controller="PortfolioEntryCtrl">
<li>{{points[0].height}}</li>
<li>{{points[0].floors}}</li>
<li>{{points[0].squarefeet}}</li>
</ul>
</div>
</div>
<!-- /.row -->
<!-- Related Projects Row -->
<div class="row">
<div class="col-lg-12">
<h3 class="page-header">Related Projects</h3>
</div>
<div class="col-sm-3 col-xs-6">
<a href="#/portfolio2">
<img class="img-responsive portfolio-item" ng-src="{{photos[1].url}}" alt="50Dalton">
</a>
</div>
<div class="col-sm-3 col-xs-6">
<a href="#/portfolio3">
<img class="img-responsive portfolio-item" ng-src="{{photos[2].url}}" alt="ChristianScienceCenter">
</a>
</div>
<div class="col-sm-3 col-xs-6">
<a href="#">
<img class="img-responsive portfolio-item" ng-src="{{photos[6].url}}" alt="">
</a>
</div>
<div class="col-sm-3 col-xs-6">
<a href="#">
<img class="img-responsive portfolio-item" ng-src="{{photos[4].url}}" alt="">
</a>
</div>
</div>
<!-- /.row -->
<hr>
</div>
ANGULAR
.when('/portfolio1',{
templateUrl: "views/portfolioItem_1.html",
controller:"PortfolioEntryCtrl"
}).when('/portfolio2',{
templateUrl: "views/portfolioItem_2.html",
controller:"PortfolioEntryCtrl"
}).when('/portfolio3',{
templateUrl: "views/portfolioItem_3.html",
controller:"PortfolioEntryCtrl"
}).when('/portfolio4',{
templateUrl: "views/portfolioItem_4.html",
controller:"PortfolioEntryCtrl"
app.controller("mainCtrl",["$scope", "$http", function($scope,$http){
$http.get('./js/images.json').success(function(image){
$scope.photos=image;
console.log(image);
});
}]).controller("PortfolioEntryCtrl",["$scope", "$http", function($scope,$http){
$http.get('./js/portfoliopoints.json').success(function(data){
$scope.points=data;
});
答
我觉得在ui-router使用正则表达式可以解决你的问题:
$stateProvider.state("portfolio", {
url: "/{page: portfolio[0-9]+}",// it will match 'portfolio1' or 'portfolio2' for example
templateUrl: function (stateParams){
//get the id from the url path like value '2' from 'portfolio2'
var currentPageId = stateParams.page.substring(9,stateParams.page.length);
//dynamically return the view you want to load
return 'views/portfolioItem_' + currentPageId + '.html';
},
controller: "PortfolioEntryCtrl"
});
而不是重复每个可能的路径,你只需要这个匹配任何路径开头的'投资组合'后面的'ID'。有了正则表达式模式,你可以做更多的事情取决于你的要求。
看看Angular的'ngView'。 – PeteGO