input the css content into the directive

Can the content of a CSS class be used in a directive to display different icons from FontAwesome?

template

 <div class="modal-tooltip" tabindex="-1">
        <span class="CSS-CLASS-I-WANT-TO-PASS-IN"></span>
        <div class="tooltip-body">
            <span ng-transclude></span>
        </div>
    </div>

directive

restrict = "E";
        scope = {
            alignment: "@"
        };

        template = Templates.toolTip;
        transclude = true;
        controller = ["$scope", ($scope) => {

        }];

.MY-CSS-CLASS-I-WANT-TO-CHANGE-THE-CONTENT-OF

content: "\f059";

Answer №1

If you want to add FontAwesome classes to your custom directive, simply pass the class as a parameter to customize the template.

For instance, in this snippet, the FontAwesome class is specified using the icon attribute.

<custom-button icon="fa fa-twitter"> Twitter </custom-button>

This value is then taken by the directive and applied to the <span> element within it.

app.directive('customButton', function() {
        return {
           restrict: 'E',
           transclude: true,
           scope: {
              icon: '@'
           },
           template: "<button>" +
                        "<span class={{icon}}>" +
                        "</span>" + 
                        "<strong ng-transclude>" +
                        "</strong>" +
                     "</button>"
           } 
});

You can see this in action with my example on JSFiddle: https://jsfiddle.net/cpgoette/ufgys7j0/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for implementing multiple yield generators in redux-saga

Our redux-saga generator has multiple yield statements that return different results. I am struggling with typing them correctly. Here's an illustration: const addBusiness = function* addBusiness(action: AddBusinessActionReturnType): Generator< ...

Utilizing the subclass type as a parameter in inheritance

Looking for a way to restrict a function in C# to only accept classes of a specific base class type? In my current implementation, I have a base class (which can also be an interface) and n-classes that extend it. Here is what I am currently doing: abstr ...

How to deliver various static files in NestJS using different paths and prefixes?

I've set up static file serving for developer documentation using the following code: app.useStaticAssets(docsLocation, { prefix: "/docs/" }) Now I have another directory with more static content that I want to serve. Is it possible to serve from ...

What is the best way to sort an array based on a person's name?

I have a list of different groups and their members: [ { "label": "Group A", "fields": [ { "value": "color1", "name": "Mike" }, { &quo ...

What is the best way to implement the Gotham-Light font using @font-face?

Looking to display Gotham-Light font on a website using CSS but lacking coding skills? I have the fonts Gotham-Light.eot and Gotham-Light.ttf. How do I go about using them in a browser? Thank you for your assistance! ...

What are the steps to create a basic star-rating system?

I attempted to create my own star rating system using HTML and CSS, but encountered issues with its functionality. While solutions like using direction: rtl or float: right worked, I am unable to implement them due to constraints related to PHP. Is there ...

Ways to retrieve the ngValue from various select elements created in the HTML code

I'm dealing with a JSON list of roles that includes their id, name, and parent_id (referring to themselves). roles My goal is to display all the roles along with their names and corresponding parents. The parent will be displayed in a select input, ...

How can you make an element appear when clicking and then disappear with a second click?

Having a bit of an issue here. When I click on the menu button "x," it triggers an onclick event that opens/displays an element. All good so far. But now, I want to click the same menu button "x" to close that same element, and that's where I'm s ...

Sort a JSON array alphabetically in Angular.js even when there are no key/value pairs specified

I'm having trouble alphabetizing a list using a JSON array in my code. Despite my efforts, the sorting doesn't seem to be working correctly. You can view my current code by following this link to the jsfiddle http://jsfiddle.net/hxxLaxL3/ Here i ...

The setting of background-size: cover does not affect the height of the background image

Looking for a solution to make a background image fill a div entirely? Here is the CSS code you can use: .class{ background-image: url('img.jpg'); background-repeat: no-repeat; background-size: cover; } You can implement this within t ...

hierarchical browsing system

Take a look at the image provided below. Currently, I am using multiple unordered lists - specifically 5. However, I would prefer to consolidate them all into a single nested ul. I am encountering two issues: How can I add a border-bottom to the hori ...

Creating an interface or type in Typescript with a nested object property that uses keys from the same interface

I am looking to create an interface or type that can restrict the nested object properties based on keys defined in the main interface. class MyClass implements MyInterface { prop1: string; promp2: number; nestedObj: { prop1: string; // Allowed a ...

Transforming react.js into HTML and CSS programming languages

I have a small experiment I need help with. As I am not familiar with react.js, I would like to convert my main.jsx file into pure HTML/CSS/JS without using react. The issue I'm facing is how to handle form data submission to the server in vanilla HTM ...

I attempted to use an `if` statement as my type guard, but TypeScript decided to overlook it

const datas = { a: { "0": 0, "1": 1 }, b: { "0": 0 } } function fetchValue (data:keyof typeof datas, prop: "0"|"1") { if(prop in datas[data]) { return da ...

Retain the previous page when the URL is manually updated using $location

My controller has a function that changes the browser's URL, but I'm struggling to maintain the original previous page when the user navigates back. Here's an example: Let's say a user is on /home and then moves to /article1. As they ...

What is the method for determining the intersection of multiple rgba values?

If I have the following CSS code: .example { background-color: rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.5); } Even though the background-color and border-color share the same rgba value, they appear as different colors due to how the bor ...

Unusual actions regarding flexible CSS style sheet

There have been countless times when I have utilized a CSS technique that I discovered on my own. When I need a dynamic stylesheet that can be included in an HTML document, I use CSS files that are not actually CSS files, but PHP files instead. For example ...

What strategies can I use to keep text-area from wrapping onto a new line?

I'm having trouble with styling my description column <template v-slot:item.description="{ item }" class="description" style="overflow-wrap: normal"> {{ item.description }} </template> CSS <style scoped> ...

Inline responsive pictures

I am attempting to align 2 images side by side while also ensuring they are responsive using Bootstrap. I have attempted to use the following code: <img src="..." class="float-left" alt="..."> <img src="..." class="float-right" alt="..."> wh ...

Angular JS: Utilizing $routeProvider for handling dynamic URLs

Within my menu, I have various groups listed that a user may belong to. I've set up a template page so that when a user selects one of the GROUPS from the menu, the fields in the template change accordingly. <li><a href="#"><i class="g ...