I am struggling with following understanding: How can I add media (query) depending styles dynamically to elements/the DOM?

Following issues I ran into:

1) I know that AngularJS cannot manipulate tags like <style> {{myMediaQueryStyles}} </style> in a directive.

2) Media queries injected as inline styles with ng-style doesn't work either

I have the following view-model.json

{
    "id":"936DA01F-9ABD-4D9D-80C7-02AF85C822A8",
    "contexts":[
        "@media (max-width: 1200px){ … }",
        "@media (max-width: 760px){ … }",
        "@media (max-width: 420px)){ … }"
    ]
}

In a simple directive I just try to write them into a <style> tag

app.directive('addStyles', function()
{
    return {   
        template: '<style>{{view-model.contexts}}</style>'        
    };
});

Is there any workaround to add media relevant styles dynamically to elements or the whole document in angularJS?

Changing the directive template: '<div>{{view-model.contexts}}</div>' works but the styles then just won't get applied.

Thanks in advance!

I am struggling with following understanding: How can I add media (query) depending styles dynamically to elements/the DOM?

Following issues I ran into:

1) I know that AngularJS cannot manipulate tags like <style> {{myMediaQueryStyles}} </style> in a directive.

2) Media queries injected as inline styles with ng-style doesn't work either

I have the following view-model.json

{
    "id":"936DA01F-9ABD-4D9D-80C7-02AF85C822A8",
    "contexts":[
        "@media (max-width: 1200px){ … }",
        "@media (max-width: 760px){ … }",
        "@media (max-width: 420px)){ … }"
    ]
}

In a simple directive I just try to write them into a <style> tag

app.directive('addStyles', function()
{
    return {   
        template: '<style>{{view-model.contexts}}</style>'        
    };
});

Is there any workaround to add media relevant styles dynamically to elements or the whole document in angularJS?

Changing the directive template: '<div>{{view-model.contexts}}</div>' works but the styles then just won't get applied.

Thanks in advance!

• javascript
• html
• css
• angularjs
• media-queries

• 1 You are giving the style tag an array of strings. I think you need to change your contexts to just one big string rather than an array. – Zack Argyle Commented Nov 12, 2013 at 15:56
• Thanks. Well, this was just an example. It doesn't work with <style>{{view-model.contexts[0]}}</style> either. – user2983883 Commented Nov 12, 2013 at 15:59
• 1 Do not dynamically update page style. It causes jank because browser would have to re-render entire page. Rethink your problem and solve it with on static CSS file and manipulating classes on your HTML elements in order to change their style or visibility. – Mohsen Commented Nov 12, 2013 at 16:01
• as per @ZackArgyle ment...try {{view-model.contexts.join('')}} – charlietfl Commented Nov 12, 2013 at 16:06
• @Mohsen Correct me if I am wrong, but sometimes you need to reflect dynamically changes that cannot be predicted by a class. And browser re-render is so marginal in my case, I can post performance test if you like. – user2983883 Commented Nov 12, 2013 at 16:10

1 Answer 1

One workaround would be to add the relevant styles to the element in a custom directive's link function, as shown in this Plunk.

In a simple case, in which the viewModel is made available directly in the controller, the directive would look like this:

app.directive('addStyles', function()
{
  return function(scope, el, attrs) {
    el.text(scope.viewModel.contexts.join('\n'));
  };
});

You could also load the JSON from a separate file or remote source (as shown in the Plunk) by tweaking the directive:

app.directive('addStyles', function($http)
{
  return function(scope, el, attrs) {
    $http.get('viewModel.json').then(function (result) {
      el.text(result.data.contexts.join('\n'));
    });
  };
});

This would allow for dynamically updating the styles. This is demonstrated in the Plunk by adding a $timeout to the directive that clears the styles after 3 seconds (you can see the text change from colored to black).

In either case, the relevant HTML markup would be <style add-styles></style>.