Question

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

示例：我有很多@ font-face规则（令牌）我想动态声明然后我可以应用style =＆＃34; font-family：whatever，serif＆＃34;到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？

Answer 1

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

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

return directive;
});

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

<style stylekom></style>

现在应该使用fonts.php

中的php脚本创建fonts.css文件

如何在标记中使用ng-repeat或其他angularjs表达式

1 个答案: