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

Accessing the session object within an Express middleware function is crucial for

Validation of OpenAPI requests on the client-side using React libraries

Issue with updating state in Python Flask Angular application

How to use jQuery to locate and update the final parameter of a URL

Adding flair to a fresh element and then removing it upon its inception

What is the best way to bring files into your project from a different directory?

Troubleshooting image loading issues when updating the base URL in an Angular JS project

Custom AngularJS menu directive using a JSON file to generate submenus

Tips for preserving dynamically generated HTML through Javascript during page reload

Having trouble with the Ionic loader? The $ionicLoading.show() function doesn't seem to be working on the first try

Issue with V-checkbox input-value not triggering correctly on change

In search of the most efficient method for integrating an AJAX-powered TreeGrid feature

Solving the puzzle of complex polymorphic object model deserialization in Java Jackson: Facing the JsonMappingException error – Unexpected token (START_OBJECT) instead

Display PDF in Forge Viewer using PDF Extension - warning generated by pdf.worker.js

Issues arise when the Angular controller fails to load

Having trouble setting the `variant='dense'` for material-ui Toolbar – it remains at a height of 64px no matter what

Including a unicode escape sequence in a variable string value

Using JavaScript and Codigniter to populate a drop down box with an array

Change the flyout menu to activate once clicked instead of when the mouse hovers over

What is the process for incorporating a new URL into the routes.js file of a preexisting Node.js project that was developed with locomotive?