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>。

Angularjs <style>标签</style>

1 个答案: