Angularjs <style> 标签答案

【问题标题】：Angularjs <style> tagsAngularjs <style> 标签
【发布时间】：2013-11-24 20:57:25
【问题描述】：

我正在努力理解以下内容：如何将取决于样式的媒体（查询）动态添加到元素/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>' 有效，但样式不会被应用。

提前致谢！

【问题讨论】：

您正在为样式标签提供一个字符串数组。我认为您需要将上下文更改为一个大字符串而不是一个数组。
谢谢。好吧，这只是一个例子。它也不适用于<style>{{view-model.contexts[0]}}</style>。
不要动态更新页面样式。它会导致卡顿，因为浏览器必须重新渲染整个页面。重新考虑您的问题并通过静态 CSS 文件和操作 HTML 元素上的类来解决它，以更改它们的样式或可见性。
根据@ZackArgyle 评论...试试{{view-model.contexts.join('')}}
@Mohsen 如果我错了，请纠正我，但有时您需要动态反映类无法预测的变化。在我的情况下，浏览器重新渲染是如此微不足道，如果你愿意，我可以发布性能测试。

标签： javascript html css angularjs media-queries

【解决方案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 中通过在 3 秒后清除样式的指令中添加 $timeout 来演示（您可以看到文本从彩色变为黑色）。

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

【讨论】：

太棒了，我有类似的方法。但这绝对有效。谢谢莎拉！