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

Question

我的指令使用一个HTML文件，该HTML文件使用CSS样式表。我需要分发指令js、HTML和CSS文件，因此CSS位置定义需要相对于HTML。

注意：这是我解决 HTML位置的方法，我还有待解决CSS文件的位置问题。

我将CSS文件放在与HTML文件相同的文件夹中，然后在HTML中进行了定义：

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

然而这指向域根，而不是HTML文件位置。有什么好的想法吗？

- ps0604

---

你在使用gulp吗？ - Nagaraja Thangavelu

Answer 1

我认为有两种方法可以解决您的问题，因为您不知道指令的位置： 解决方案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文件合并成一个，并注入到你的index文件中。

- Nagaraja Thangavelu

---

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

@ps0604 这个路径是动态的。虽然它在同一个文件夹里，但你需要获取模板 HTML 的路径并将其放入作用域变量中，因为你不知道你的 HTML 存储在哪里。然后像上面的示例一样将作用域变量传递给 ng-href。 - Nagaraja Thangavelu

请编辑指令.js和指令.html文件。 - Nagaraja Thangavelu

Answer 2

你需要创建分开的目录用于存放css和html(模板文件)，并使用从根目录到css文件夹的完整路径。

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

- ma_dev_15

---

这不是我想要实现的，因为我不知道指令文件将会被放置在哪里。 - ps0604

如果您在任何HTML中使用样式表，如果已加载，则会附加URL，然后是文件名。例如：如果您在页面abc.com/abc上， 则如果使用带反斜杠的/angualr/css/style.css，则样式表将从abc.com/angualr/css/style.css加载如果您在页面abc.com/abc上， 则如果不使用反斜杠的angualr/css/style.css，则样式表将从abc.com/abc/angualr/css/style.css加载我希望您明白我的意思。 - ma_dev_15