Leverage AngularJS to dynamically load CSS stylesheets using ng-repeat

Question

Leverage AngularJS to dynamically load CSS stylesheets using ng-repeat

I have organized my stylesheets into separate modules for each include, and I am trying to dynamically load them. However, I am facing some difficulties as when they are rendered, all I see is the following markup for each sheet that should be loaded:

<link ng-repeat="inlude in includes" rel="styesheet" href="" class="ng-scope">

Below is a snippet of my HTML code:

<!DOCTYPE html>
<html ng-app="forum" ng-controller="masterCtrl">
<head>
    <title>Forum</title>
    <link rel="stylesheet" href="/stylesheets/reset.css">
    <link rel="stylesheet" href="/stylesheets/style.css">
    <link ng-repeat="inlude in includes" rel="stylesheet" href="{{include.stylesheet}}">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script>
    <script src="/scripts/app.js"></script>
    <script src="/scripts/controllers.js"></script>
    <!--[if lt IE 9]>
    <script src="/scripts/html5shiv.js"></script>
    <![endif]-->
</head>
<body ng-view>
</body>
</html>

Furthermore, here is an excerpt from my primary controller:

function masterCtrl($scope){
    $scope.includes = {
        header: {
            src: 'views/includes/header.html',
            stylesheet: 'stylesheets/header.css',
            searchQuery: ''
        },
        threadList: {
            src: 'views/includes/threadList.html',
            stylesheet: 'stylesheets/threadList.css'
        }
    };
}

All other functionalities seem to be working properly. Thank you for your assistance.

html css angularjs header angularjs-ng-repeat

Answer 1

Answer №1

Make sure to adjust your href attribute to ng-href, and update the link structure as shown below to properly set the source for the stylesheets.

<link ng-repeat="include in includes" rel="stylesheet" ng-href="include.stylesheet" class="ng-scope">

By the way, the reason it wasn't functioning correctly was due to a typo in your code - you wrote inlude in includes.

Answer 2

Make sure to adjust your href attribute to ng-href, and update the link structure as shown below to properly set the source for the stylesheets.

<link ng-repeat="include in includes" rel="stylesheet" ng-href="include.stylesheet" class="ng-scope">

By the way, the reason it wasn't functioning correctly was due to a typo in your code - you wrote inlude in includes.

Answer 3

Answer №2

It is advised to use ng-href instead of href attributes in your code. Please note that this method may impact the loading speed of your webpage.

Answer 4

It is advised to use ng-href instead of href attributes in your code. Please note that this method may impact the loading speed of your webpage.

Answer 5

Answer №3

For those interested, take a look at AngularCSS

This unique Angular module enables the inclusion of stylesheets within your components (directives) and pages (routes).

If you are utilizing directives

myApp.directive('miyDirective', function () {
  return {
    restrict: 'E',
    templateUrl: 'my-directive/my-directive.html',
    css: 'my-directive/my-directive.css'
  }
});

If you are utilizing ngRoute

$routeProvider
  .when('/my-page', {
    templateUrl: 'my-page/my-page.html',
    controller: 'pageCtrl',
    css: 'my-page/my-page.css'
  });

You can also utilize it as a service ($css)

myApp.controller('pageCtrl', function ($scope, $css) {

  // Attaches stylesheet(s) to scope create/destroy events (recommended over add/remove)
  $css.bind({ 
    href: 'my-page/my-page.css'
  }, $scope);

  // Simply include stylesheet(s)
  $css.add('my-page/my-page.css');

  // Simply remove stylesheet(s)
  $css.remove(['my-page/my-page.css','my-page/my-page2.css']);

  // Remove all stylesheets
  $css.removeAll();

});

Answer 6

For those interested, take a look at AngularCSS

This unique Angular module enables the inclusion of stylesheets within your components (directives) and pages (routes).

If you are utilizing directives

myApp.directive('miyDirective', function () {
  return {
    restrict: 'E',
    templateUrl: 'my-directive/my-directive.html',
    css: 'my-directive/my-directive.css'
  }
});

If you are utilizing ngRoute

$routeProvider
  .when('/my-page', {
    templateUrl: 'my-page/my-page.html',
    controller: 'pageCtrl',
    css: 'my-page/my-page.css'
  });

You can also utilize it as a service ($css)

myApp.controller('pageCtrl', function ($scope, $css) {

  // Attaches stylesheet(s) to scope create/destroy events (recommended over add/remove)
  $css.bind({ 
    href: 'my-page/my-page.css'
  }, $scope);

  // Simply include stylesheet(s)
  $css.add('my-page/my-page.css');

  // Simply remove stylesheet(s)
  $css.remove(['my-page/my-page.css','my-page/my-page2.css']);

  // Remove all stylesheets
  $css.removeAll();

});

Leverage AngularJS to dynamically load CSS stylesheets using ng-repeat

Answer №1

Answer №2

Answer №3

Similar questions

Maintain hover effect of main menu on sub-menu in CSS3 flip dropdown menu

Ensure that the tab's content fills up the entire space provided and prevent the need for a vertical scrollbar to appear

angular ensuring seamless synchronization of objects across the application

Trouble with ASP.NET Master Page CSS Rendering Incorrectly

What is the best way to position text at the bottom of an image using CSS?

Adjusting the size based on the screen width of various devices

Using Jade language in a standard web application without the need for Node.js

Can you explain the distinction between $translateChangeSuccess and $translateChangeStart and provide guidance on which one would be more suitable for my situation?

Tips for generating a .csv document using data from an array?

The `innerHTML` function is responsible for closing HTML

Using CSS selectors in Framework7 Vue allows for precise targeting and styling

Expanding your selection capabilities using BeautifulSoup

Add fresh HTML elements within the ng-repeat loop

Issue: Unable to redirect to 'login' page from 'app.home' state

Webix UI - Struggling to create dynamically responsive components during screen resizing

Can you guide me on how to duplicate a file when a button is clicked?

There is a discrepancy with the rectangular data object when trying to add a response interceptor, as it is undefined

Run the script within the Angular scope

Learn the process of invoking a function from Controller-B within Controller-A using AngularJS

Exploring Angular: Why is the link option important in directives?