Всем добрый день!
Я работаю над портфолио 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>
Угловая
.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;
});
Я думаю, что использование шаблона regex в 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". С шаблоном регулярного выражения вы можете сделать еще больше, зависит от вашего требования.
ngView
.