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>'是可以的，但是样式不会被应用。谢谢！

- user2983883

---

你正在给样式标签传递一个字符串数组。我认为你需要将上下文更改为一个大字符串，而不是一个数组。 - Zack Argyle

不要动态更新页面样式。这会导致页面卡顿，因为浏览器需要重新渲染整个页面。重新思考问题，通过使用一个静态的CSS文件并在HTML元素上操作类来改变它们的样式或可见性来解决问题。 - Mohsen

@Mohsen 如果我理解错了，请纠正我。有时候您需要动态反映不能被类预测的更改。在我的情况下，浏览器重新渲染非常微不足道，如果您喜欢，我可以发布性能测试。 - user2983883

@ZackArgyle 谢谢。它不起作用。我修改了我的视图模型为 "contexts":" /* 媒体查询字符串 */ "。但是它仍然无法在视图中呈现。 - user2983883

很确定 Angular 不会解析样式。检查元素，它看起来像 <style type="text/css">{{view-model.contexts}}</style> 而不是 <style type="text/css">div { /*styles*/ }</style>。也许可以尝试查看 ng-style 指令：http://docs.angularjs.org/api/ng.directive:ngStyle - Chad

Answer 1

一种解决方法是在自定义指令的link函数中将相关样式添加到<style>元素中，如此Plunk所示。

在简单情况下，即viewModel直接在控制器中可用的情况下，该指令应如下所示：

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

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

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

- Sarah

---

太棒了，我也有类似的方法。但这个绝对有效。谢谢Sarah！ - user2983883