angular/angularjs.org

CSS for Directive Attributes

Closed this issue · 1 comments

In a perfect world, CSS should control exactly how a website looks, but sometimes when I use Javascript, I make decisions in the code that affect how the website looks (how big something should be, how fast something should fade in, which direction it should go when it slides off the page, etc.) I make all that configurable through the directive's attributes, which are controlled in the HTML, not the CSS.

A recent example that came up an hour ago had to do with popups (not Modals, but small menu popups). The distance between the popup and the button that called the popup was a design decision, but I ended up making it an attribute, set in the HTML.

But what if there was a fourth parameter to the link function called cssAttrs that contained all of the css properties for the class, including custom css properties like popup-margin. Design decisions could be set in the CSS code, but referenced by the Javascript code.

The biggest issue now is that the browser seems to erase any css properties it does not recognize, but maybe there's a way around that.

@mikeg2 - this should be posted to https://github.com/angular/angular.js - since this project is for the AngularJS homepage only. Also, I am not quite sure what this cssAttrs should contain. Perhaps you could provide more explicit examples?