Assigning ng-Attributes using vanilla JavaScript

Question

Assigning ng-Attributes using vanilla JavaScript

My journey with coding Angular started not too long ago.

I have a HTML structure with various divs and classes. I am looking to loop through these classes and add a tooltip to a specific div within each class. Rather than hardcoding the Angular attributes directly in the HTML, I would like to dynamically generate them to keep the code cleaner.

For instance, by using:

button.setAttribute("tooltip-placement", "bottom");

However, Angular seems to ignore this and sticks to the default placement: top.

How can I convince Angular to recognize my customized handling of Angular attributes?

Thank you!

The directive below, which manipulates the DOM, hasn't yielded the desired results: even though it appears in the DOM when inspected, Angular chooses to overlook it. The objective was to display a tooltip upon hover.

demoApp.directive('tooltipView', function () { return { restrict: 'EA',

 link: function (scope, element, attrs) {
            element.attr("tooltip-placement", scope.placement);
            element.attr("tooltip-html-unsafe", "testtooltip");
            element.attr("tooltip-trigger", "mouseover");
        }
    };

})

javascript html css angularjs

Answer 1

Answer №1

Depending on the timing of when the tooltip is generated, the behavior may vary. If the tooltip code runs before executing the button.setAttribute(..) code, the expected result may not be achieved.

One suggestion is to utilize angular-bootstrap's tooltip wrapper and take advantage of Angular's data binding feature to specify the position.

For example:

<... tooltip-placement="{{ scopePropertyIndicatingTooltipPlacement }}" ../>

In your controller:

function MyCtrl($scope) {
    $scope.scopePropertyIndicatingTooltipPlacement = "right";
}

Answer 2

Depending on the timing of when the tooltip is generated, the behavior may vary. If the tooltip code runs before executing the button.setAttribute(..) code, the expected result may not be achieved.

One suggestion is to utilize angular-bootstrap's tooltip wrapper and take advantage of Angular's data binding feature to specify the position.

For example:

<... tooltip-placement="{{ scopePropertyIndicatingTooltipPlacement }}" ../>

In your controller:

function MyCtrl($scope) {
    $scope.scopePropertyIndicatingTooltipPlacement = "right";
}

Answer 3

Answer №2

When it comes to handling attribute changes for an element, the recommended approach is to include it in the link function. This can be achieved as shown in the following example:

app.directive("tooltipView", function($compile) {

return {
    restrict: "AE",
    link: function(scope, element, attrs) {                 
        var tooltipContent = scope.tooltipHTML;     
        if (!element.attr('tooltip-html-unsafe')) { 
            element.attr("tooltip-html-unsafe", tooltipContent);
            $compile(element[0])(scope);
        }
    });    
   }    
  };
});

Answer 4

When it comes to handling attribute changes for an element, the recommended approach is to include it in the link function. This can be achieved as shown in the following example:

app.directive("tooltipView", function($compile) {

return {
    restrict: "AE",
    link: function(scope, element, attrs) {                 
        var tooltipContent = scope.tooltipHTML;     
        if (!element.attr('tooltip-html-unsafe')) { 
            element.attr("tooltip-html-unsafe", tooltipContent);
            $compile(element[0])(scope);
        }
    });    
   }    
  };
});

Assigning ng-Attributes using vanilla JavaScript

Answer №1

Answer №2

Similar questions

Guide on transforming Color to HTML color with .NET Standard 2.0

I am looking to set an HTML file as the homepage for my Next.js project

Dealing with the challenge of line breaks across different browsers: Showing content retrieved from an ajax request in a

Rebooting checkbox data with AJAX on MVC 5 form submission

The media query for mobile is not functioning properly

Unique styles and scripts for a custom login portal

Experimenting with the speechSynthesis API within an iOS webview application

The nuSelectable plugin enhances the functionality of jQuery

basic handler in expressjs using the PUT method along with jQuery ajax

How to selectively disable options in p-dropdown using Angular Reactive Forms

TypeScript - patiently anticipating the completion of nested for loops

Adjust the dimensions of a Three.js-generated 3D Cylinder in real-time

Stop the div from collapsing when hiding or deleting all child elements to maintain its structure

What is preventing these elements from being contained within particular divs?

Is it achievable to create shadows that do not overlap?

Angular's implementing Controller as an ES6 Class: "The ***Controller argument is invalid; it should be a function but is undefined."

How can I use AJAX to update a DIV when an image is swapped out?

When it comes to React, an unspoken truth is that undefined could potentially cause issues

Error message in TypeScript: A dynamic property name must be a valid type such as 'string', 'number', 'symbol', or 'any'

Perform an additional HTTP request and utilize the response within the existing Observable