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?

Improve this question
1
  • Are you using gulp? Commented Aug 1, 2016 at 2:11

2 Answers 2

Reset to default
4
+150

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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 <link rel="stylesheet" ng-href="filename.css"> in the directive but it looks for the CSSfile in the domain root.
@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.
please edit the description and post your directive.js and directive.html..
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'>
Improve this answer

2 Comments

that's not what I'm trying to achieve, as I don't know where the directive files will be located.
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.