Implementing a custom body class in AngularJS when utilizing partials

Question

Implementing a custom body class in AngularJS when utilizing partials

Looking for some help with AngularJS.

I have an index.html file, along with controllers and partials.

The <body> tag is located in the index.html. I am trying to set the class for the body using my controller.

After adding a value to $scope.body_class and referencing it in my index.html like this:

<!doctype html>
<html lang="en" ng-app="myGreatApp">
...
<body ng-class="{body_class}"> {{body_class}} Hi!

Unfortunately, body_class doesn't return any value.

How can I successfully retrieve a value from body_class?

javascript angularjs

Answer 1

Answer №1

When using directives in AngularJS, it is important to define the controller on the element or a parent element in order for them to interact properly. Alternatively, you can inject $rootScope and use it instead. The ng-class directive accepts a hash like this:

<body ng-controller="YourController" ng-class="{body_class: <expression>}"> {{body_class}} Hi!

If <expression> evaluates to true, the element will receive a html class corresponding to the key in the hash.

<body ng-controller="YourController" ng-class="{body_class: true}" class="body_class"> whatever value $scope.body_class has Hi!

Alternatively, if you do not want to declare the class name in the markup, you can directly bind it using ng-class like this:

<body ng-controller="YourController" ng-class="body_class"> {{body_class}} Hi!

For more information, refer to the ng-class documentation

Answer 2

When using directives in AngularJS, it is important to define the controller on the element or a parent element in order for them to interact properly. Alternatively, you can inject $rootScope and use it instead. The ng-class directive accepts a hash like this:

<body ng-controller="YourController" ng-class="{body_class: <expression>}"> {{body_class}} Hi!

If <expression> evaluates to true, the element will receive a html class corresponding to the key in the hash.

<body ng-controller="YourController" ng-class="{body_class: true}" class="body_class"> whatever value $scope.body_class has Hi!

Alternatively, if you do not want to declare the class name in the markup, you can directly bind it using ng-class like this:

<body ng-controller="YourController" ng-class="body_class"> {{body_class}} Hi!

For more information, refer to the ng-class documentation

Answer 3

Answer №2

Give this a try:

Controller

function DisplayCtrl($scope){
$scope.MyText = 'Welcome'
}

HTML

<body data-ng-app="" data-ng-controller='DisplayCtrl'>
<div data-ng-class="MyText">Welcome to the world
</div>
</body>

Check out this JsFiddle example

Answer 4

Give this a try:

Controller

function DisplayCtrl($scope){
$scope.MyText = 'Welcome'
}

HTML

<body data-ng-app="" data-ng-controller='DisplayCtrl'>
<div data-ng-class="MyText">Welcome to the world
</div>
</body>

Check out this JsFiddle example

Implementing a custom body class in AngularJS when utilizing partials

Answer №1

Answer №2

Similar questions

Tips for enabling mouse functionality while utilizing PointerLockControls

`In AngularJS, the same URL ('/') can display different templates depending on the user's login status.`

problem arising from the origin preventing me from utilizing localStorage in conjunction with JSDOM

I'm confused, I installed the module but it's still showing an error message saying it can

Having trouble with `$resource` in AngularJs but everything seems to be working fine with `$http`. Wondering how to transfer the parameters used in `$http`

The Final Div Fluttering in the Midst of a jQuery Hover Effect

Is it possible to host multiple React applications on a single port? Currently experiencing issues with running both an Admin panel and the Front side in production mode on the same Node.js API server

Guide on transferring data from an API using mapped React hooks

Unable to locate a declaration file for the module "../constants/links" in src/constants/links.js, as it implicitly defaults to type 'any'

What makes using the `@input` decorator more advantageous compared to the usage of `inputs:[]`

What potential factors could lead to an MUI Snackbar failing to produce the accurate class names?

Switching from "Straight Quotes" to "Curly Quotes"

Angular with Flask: Form submitted via POST method is returning empty

Why would someone opt to utilize process.env.PORT in their code?

I'm experiencing very slow page load times in dev mode with Next.js (30s+). What could be the reason behind this sluggishness?

"Exploring the process of looping through a JSON object following an asynchronous retrieval of JSON data using

Double your audio experience with Webaudio by playing the sound twice

What are some ways to optimize the efficiency of handling a sizable JSON object in React Native?

Is there a way to retrieve the `this.$route` data while using vue-apollo?

Trigger event listener of AngularJS directive on click and send information to it