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

Question

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

注意： 这是我如何解决 HTML的位置，我有待解决CSS文件的位置。

我把CSS文件放在与HTML文件相同的文件夹中，然后在HTML中定义：

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

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

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

Answer 1

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

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

如果CSS的长度很小，您可以通过样式标记将其直接包含在模板HTML本身中。

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

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

使用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来构建角度JS代码。 但是，如果你正在使用gulp，你可以添加一个gulp任务并将所有CSS管道传输到一个CSS并注入你的索引。

Answer 2

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

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