Angularjs <style>标签

Question

我正在努力遵循以下理解:如何根据样式动态地向元素/ DOM添加媒体(查询)？

以下问题我遇到了:

1)我知道AngularJS不能像<style> {{myMediaQueryStyles}} </style>指令那样操纵标签 .

2)作为内联样式注入的媒体查询ng-style也不起作用

我有以下内容 view-model.json

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

在一个简单的指令中,我只是尝试将它们写入<style>标签

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

是否有任何解决方法可以动态地将媒体相关样式添加到angularJS中的元素或整个文档中？

更改指令template: '<div>{{view-model.contexts}}</div>'有效,但样式不会被应用.

提前致谢!

Answer 1

一种解决方法是在自定义指令的link函数中向元素添加相关样式,如此Plunk中所示.

在一个简单的例子中,viewModel直接在控制器中可用,该指令看起来像这样:

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

您还可以通过调整指令从单独的文件或远程源(如Plunk中所示)加载JSON:

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

这将允许动态更新样式.这在Plunk中通过向指令添加$ timeout来演示,该指令在3秒后清除样式(您可以看到文本从彩色变为黑色).

在任何一种情况下,相关的HTML标记都是<style add-styles></style>.