Застрял на нескольких просмотров с похожими именами в Angular

0

Всем добрый день!

Я работаю над портфолио 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;
});
  • 0
    Посмотрите на Angular в ngView .

1 ответ

0

Я думаю, что использование шаблона 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". С шаблоном регулярного выражения вы можете сделать еще больше, зависит от вашего требования.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню