卡在角度相似的多个视图

Question

美好的一天每个人！

我正在从事一个投资组合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; 
}); 

Answer 1

我觉得在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'。有了正则表达式模式，你可以做更多的事情取决于你的要求。