我正在为以下理解而苦苦挣扎: 如何向元素/DOM 动态添加依赖样式的媒体(查询)？
我遇到了以下问题:
1) 我知道 AngularJS 不能像这样操作标签
<style> {{myMediaQueryStyles}} </style>在指令中。
2) 媒体查询作为内联样式注入(inject) 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>'有效，但样式将不会得到应用。
提前致谢!
最佳答案
一种解决方法是将相关样式添加到自定义指令的 link 中的元素。功能，如本 Plunk 所示.
在一个简单的例子中，viewModel 直接在 Controller 中可用，指令看起来像这样:
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> .
关于javascript - Angularjs <style> 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19933772/