如何在 <head> 标签中使用 ng-repeat 或其他 angularjs 表达式答案

【问题标题】：How to use ng-repeat or othe angularjs expressions in <head> tag如何在 <head> 标签中使用 ng-repeat 或其他 angularjs 表达式
【发布时间】：2014-09-01 09:48:00
【问题描述】：

我正处于学习 Angularjs 作为前端框架的早期步骤，我想用 CSS 规则动态地提供我的索引页面，这些规则将插入到标签下的页面中，我不知道是不是是否可以在样式标签内使用 ng-repeat，因为我不想在 html 元素上使用内联 css 样式。

示例：我有许多想要动态声明的@font-face 规则（令牌），然后我可以将 style="font-family:whatever,serif" 应用于 html 元素。

这里是controller.js

var fontsApp = angular.module('fontsApp', []);
fontsApp.controller('FontsListCtrl', function ($scope, $http) {
  $http.get('fonts.php').success(function(data) { 
 $scope.styles = JSON.parse(data.css); 

  });

 });

这是html页面

<!DOCTYPE html>

<html   ng-app="fontsApp" ng-controller="FontsListCtrl">
    <head>
        <meta charset="UTF-8" />
        <meta name="description" content=""/>
        <meta name="keywords" content=""/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title></title>

    <script src="js/angular-1.2.19/angular.min.js"></script>
    <script src="js/controllers.js"></script> 
    <style type="text/css" ng-repeat="rule in styles" >

    I want to Repeat the Css rules here 
         {{rule.css}}

    </style>
</head>
<body >

这行不通。我如何使用 Angularjs 来做到这一点？

【问题讨论】：

为什么不可能？你试过什么？您的代码、预期输出和实际输出是什么？
AngularJS : conditionally rendering css in html head的可能重复
不，这不是同一个问题，您添加的链接是关于将标签呈现到外部文件而不在标签内重复
正确的表达式是{{ rule }}。不是{{styles.rule}}

标签： angularjs

【解决方案1】：

好的，对于任何有此问题并寻找简单答案的人，我发现解决此问题的最佳答案是创建一个指令并将其绑定到 templateUrl。

fontsApp.directive('stylekom', function() {
var directive = {}; 
directive.restrict = 'A'; /* restrict this directive to Attribute */
directive.templateUrl = "fonts.css";

return directive;
});

然后在你的 html 文件中添加一个名为的新 head 元素，其属性名为 stylekom，它与我们在上面代码中创建的指令相同。

<style stylekom></style>

现在应该使用 fonts.php 中的 php 脚本创建文件 fonts.css

【讨论】：