Angularjs <style> 标签

Posted 2023-03-06

【中文标题】Angularjs <style> 标签

【英文标题】：Angularjs <style> tags

【发布时间】：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 如果我错了，请纠正我，但有时您需要动态反映类无法预测的变化。在我的情况下，浏览器重新渲染是如此微不足道，如果你愿意，我可以发布性能测试。

【参考方案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>。

【讨论】：

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