Angular JS 指令 - CSS 文件相对于 HTML 的位置

Posted 2023-03-06

【中文标题】Angular JS 指令 - CSS 文件相对于 HTML 的位置

【英文标题】：Angular JS directive - location of CSS file relative to HTML

【发布时间】：2016-12-02 17:59:06

【问题描述】：

我的指令使用 html 文件。 HTML 文件使用 CSS 样式表。我需要分发指令js、HTML和CSS文件，所以CSS位置定义需要相对于HTML。

注意：This is how I solvedHTML的位置，我有待解决CSS文件的位置。

我把CSS文件和HTML文件放在同一个文件夹下，然后在HTML中定义：

<link rel="stylesheet" href='somefile.css'>

但是这指向域根目录，而不是 HTML 文件位置。

任何想法如何实现这一目标？

【问题讨论】：

你在使用 gulp 吗？

【参考方案1】：

您需要为 css 和 html（模板文件）创建单独的目录 并使用从根到 css 文件夹的完整路径

<link rel="stylesheet" href='/angualr/css/style.css'>

【讨论】：

这不是我想要实现的，因为我不知道指令文件的位置。

如果你在任何 html 中使用样式表，如果它被加载，它将附加 url，然后是你的文件名。例如：如果你在页面abc.com/abc，那么你的样式表将从abc.com/angualr/css/style.css加载如果你使用带有反斜杠的/angualr/css/style.css如果你在页面abc.com/abc，那么你的样式表将从abc.com/abc/angualr/css/style.css加载如果你使用angualr/css/style.css没有反斜杠我希望你明白我的意思。

【参考方案2】：

我认为有两种方法可以解决您的问题，因为您不知道指令的位置：

解决方案 1 - 古老的 HTML 方式

如果 CSS 的长度很小，你可以通过 style 标签直接将它包含在你的模板 HTML 中。

<style type="text/css">
    Add style rules here
</style>

解决方案 2 - Angular 方式（最推荐）

使用 ngHref 指令。

在你的directive.js代码中，你可以把directive.html的路径放到一个scope/rootScope变量中，然后你就可以从directive.html访问它了

在directive.js中

link: function (scope, iElement, iAttrs) 
     scope.htmlPath = <path of templateURL>;
 

在directive.html中

<link rel="stylesheet" ng-href=" htmlPath /filename.css">

注意：

我希望你没有使用 Gulp 来构建 Angular JS 代码。但是，如果您正在使用 gulp，您可以添加一个 gulp 任务并将所有 CSS 通过管道传输到单个 CSS，然后可以注入到您的索引中。

【讨论】：

使用 hRef 对我不起作用，CSS 文件和 HTML 文件（模板）在同一个文件夹中。因此，我尝试在指令中使用<link rel="stylesheet" ng-href="filename.css">，但它会在域根目录中查找 CSSfile。

@ps0604 路径是动态的。虽然它在同一个文件夹中，但您需要获取模板 HTML 的路径并将其放入范围变量中，因为您不知道 HTML 所在的位置。然后将作用域变量传递给 ng-href，如上例所述。

请编辑描述并发布您的directive.js和directive.html..