如何在标签中使用 ng-repeat 或 othe angularjs 表达式<head>

我正处于学习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 >

这是不工作。

好的，对于任何人都有这个问题，并寻找简单的答案，我发现解决这个问题的最佳答案是创建一个指令并将其绑定到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>

现在应该使用php脚本在fonts.php

中创建文件fonts.css

相关内容

最新更新

热门标签：