3

My directive uses an HTML file. The HTML file uses a CSS stylesheet. I need to distribute the directive js, HTML and CSS files, so the CSS location definition needs to be relative to the HTML.

Note: This is how I solved the location of the HTML, I have pending to solve the location of the CSS file.

I put the CSS file in the same folder as the HTML file, and then defined in the HTML:

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

however this points to the domain root, not to the HTML file location.

Any ideas how to achieve this?

Community
  • 1
  • 1
ps0604
  • 1,227
  • 23
  • 133
  • 330

2 Answers2

4

I think there are two ways to fix your issue as you don't know where the directives are located:

Solution 1 - Ancient HTML Way

If the length of the CSS is small, you can directly include it in your template HTML itself, through the style tag.

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

Solution 2 - The Angular Way(most recommended)

Use ngHref directive.

In your directive.js code, you can just put the path of the directive.html to a scope/rootScope variable and then you can access it from the directive.html

In directive.js

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

In directive.html

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

Note:

I hope you are not using Gulp to build the angular JS code. But, If your are using gulp, you can add a gulp task and pipe all the CSS to a single CSS and can inject to your index.

Nagaraja Thangavelu
  • 1,168
  • 1
  • 15
  • 31
  • Using hRef didn't work for me, the CSS file and the HTML file (the template) are in the same folder. Therefore, I tried to use `` in the directive but it looks for the CSSfile in the domain root. – ps0604 Aug 02 '16 at 02:33
  • @ps0604 The path is dynamic right. Although it is in same folder, you need to get the path of the template HTML and put it in a scope variable as you don't know where your HTML resides. And then pass the scope variable to ng-href like as mentioned in the above example. – Nagaraja Thangavelu Aug 02 '16 at 05:38
  • please edit the description and post your directive.js and directive.html.. – Nagaraja Thangavelu Aug 02 '16 at 05:39
1

You need to make separate directories for css and html(template files) and use full path from root to the css folder

<link rel="stylesheet" href='/angualr/css/style.css'>
ma_dev_15
  • 1,176
  • 7
  • 18
  • that's not what I'm trying to achieve, as I don't know where the directive files will be located. – ps0604 Jul 28 '16 at 11:28
  • Still if you use the stylesheet in any html, if it is loaded it will append the url and then your file name. eg: if you are on page `abc.com/abc` then your stylesheet will load from `abc.com/angualr/css/style.css` if you use `/angualr/css/style.css` with backslash if you are on page `abc.com/abc` then your stylesheet will load from `abc.com/abc/angualr/css/style.css` if you use `angualr/css/style.css` without backslash I hope you understand what I mean. – ma_dev_15 Jul 28 '16 at 11:30