javascript - Angular - 设置每页更改的路径变量

Question

我在我网站的不同部分，在不同的文件夹级别包含 ng-including partials。因此，我需要能够为每个页面设置根相对文件夹路径，以便可以找到诸如部分和图像之类的 Assets 。例如，像这样，但正确的是:

index.html:

<div class="homepage">
    <ng-include src="'patterns/header.html'">
</div>

但也能够访问以下相同的部分:

/individuals/header/index.html

<div class="individual">
    <ng-include src="'../../patterns/header.html'">
</div>

有没有办法设置类似的东西

pathIs = '../../patterns/'

将像这样在单个页面上使用:

<ng-include="{{pathIs}} + 'header.html'">

如果是这样，我应该在哪里做？目录结构如下:

index.html
|
patterns/
--------header.html
|
individuals/
--------header/
----------------index.html

(我在 index.html 和 individuals/header/index.html 中都包含了 header.html)

Answer 1

有很多方法可以做到这一点，一种方法是将相对路径存储在服务中，例如:

services.factory('ConfigurationService', function(){    
    var root = {};

    root.getWebappContextName = function () {
        return "/myapp";
    };      

    return root;    
});

在你的 Controller 中:

$scope.getTemplatePath = function () {
   return ConfigurationService.getWebappContextName() + "/myspecificpath/;
}
$scope.templatePath = $scope.getTemplatePath();

在您的 html 中:

<div id="header" data-ng-include data-src="templatePath + 'header.html'"></div>