gabrieldelepine / angular-css-injector Goto Github PK

This is a function I use which assumes you have less.js loaded:

var $style = function(path, refresh, id){
if(_.isArray(path)) {
_.each(path,function(p){
load(p);
})
} else {
load(path);
}
function load(path){
var doc = document, head = doc.getElementsByTagName('head')[0], el = doc.createElement('link'),isLess=false;
el.type = "text/css";
el.href = path;
if(id){
el.id = id;
}
if(path.match(/.less/)) {
el.rel = "stylesheet/less";
isLess = true;
} else {
el.rel = "stylesheet"
}
head.lastChild.parentNode.insertBefore(el, head.lastChild.nextSibling);
if(isLess) {
less.sheets.push(el);
if(refresh){
less.refresh();
}
}
}
}

There is no possibility to set singlePageMode from provider on config phase.

In your plugin singlePageMode variable defined twice.
Provider modified global variable and in service you use local variable.

I am not able to declare the Angular app on the HTML tag because I am injecting Angular into a Django Template. My app is defined on a DIV. Angular is quite happy to work this way, but this plugin will not work.

Hi, (I open an issue to my own repository, because I don't have enough time this days to fix it by myself).

With angular-css-injector, set setSinglePageMode(TRUE) remove the CSS files added dynamically every time the view change.

With angular 1.0.8 I didn't find the way to remove the CSS files between the moment the view be loaded and the view be display.

I only find the way to remove the CSS files before the new view be loaded (event $locationChangeStart) and it's so early.
The second possibility is remove the CSS files after the new view be loaded and displayed (event $locationChangeSuccess) but in this case it's so late and I remove also the CSS files belong to the new view.

Does anyone know how to improve this behavior ? Maybe with the event $routeUpdate but in this case the reloadOnSearch property has been set to false (I don't know what does it mean, there is a little explanation here http://stackoverflow.com/a/14765954/2547632).

angular-css-injector doesn't work when tha app has the following config:

    .config(function($interpolateProvider) {
        $interpolateProvider.startSymbol('{[').endSymbol(']}');
    })

I see that the {{ }} interpolation is hardcoded. Need somehow to respect the app's config.

head.append($compile("<link data-ng-repeat='stylesheet in injectedStylesheets' data-ng-href='{{stylesheet.href}}' rel='stylesheet' />")(scope));

Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element http://errors.angularjs.org/1.2.3/jqLite/nosel minErr/<@http://localhost/~user/app/spa/Scripts/angular/1.2.3/angular.js:78 JQLite@http://localhost/~user/app/spa/Scripts/angular/1.2.3/angular.js:2127 @http://localhost/~user/app/spa/Scripts/angular/angular-css-injector.js:15
...

So [as of a certain release] your code has full dependency on jquery

I'm working on a project that is using ui-router. I want to use css-injector for state specific views.

The injector successfully injects my css files when I first land on a page. However, if I navigate away and then back to a page, the css is no longer injected. A hard reload fixes the issue.

Has anyone dealt with a similar issue? Does anyone have any ideas on how to resolve this?

Hello,

The CSS injector does not work disabling debug info with: $compileProvider.debugInfoEnabled(false);
(https://docs.angularjs.org/guide/production).

The problem is "head.scope();". A workaround is simply using $rootScope.
So instead of setting scope = head.scope(); always setting "scope = $rootScope" seems to solve the problem.

Kind regards
Peter

Please add angular-css-injector to NPM

Hi @GabrielDelepine ,
I want to add this library to cdnjs via send PR.
I found that the git tags show v1.4.0, but the angular-css-injector.js and angular-css-injector.min.js are both v1.0.4.
Please check the version, thank you.

cdnjs/cdnjs#7598

I'm trying to use this service in a module who's scope is limited to a specific widget on the page. Does that mean there's no way to create the scope() on head? The service script is failing with

var scope = angular.element("head").scope();

returning "undefined"

It would be nice not to limit functionality to stylesheets and to be able to add <script/> dynamically too

Why not make it a directive so that stylesheet injection become declarative and not imperative in the controller?
Something like:

<ng-style src='css_from_current_module.css'><ng-style>

I used bower install angular-css-injector and got version 1.0.3. I found it did not work when switching pages. I spent times on debugging it and later I found out that the code on Github is version 1.0.4. However, when I tried to get 1.0.4, I got an error "bower angular-css-injector#~1.0.4 ENORESTARGET No tag found that was able to satisfy ~1.0.4". Can you please let me know how to get version 1.0.4?

Your help is greatly appreciated.

I'm getting below error though I configured as per instruction.

Add integration with ui-router and ngRoute so that we could define hat css file to load by each route

The minified version appears to be broken (for me at least). I am using Require.js with a project and it appears that when I am trying to use the minified version of cssInjector the following error is thrown:
Unknown provider: eProvider <- e <- cssInjector

However this is not the case when using the non-minified version. IMO it should be something trivial like changing the syntax to use the DI angular syntax and minify again. Cheers :)

how I can remove all dynamic stylesheets added before add new stylesheet in header on a single page application?

I can't get it to work with Angular's latest version. Bower makes me choose between the required 1.2.6 from this project, or use my current 1.3. Installs fine if I choose 1.3, but breaks my controllers just by injecting it into a module.
Is it really not compatible at this point?

These last four lines? What are they doing?

        scope.stylesheets_service_dynamicStylesheets.push({href: href});
    };

    return {
        add: addStylesheet,
    };

Instead of requiring ng-app on the <html> tag, it would be nice if this worked with a bootstrapped app.

Since this module is nice, why don't you include in package manager like Bower?