18

angular jsを使用してhtmlヘッドにcssを動的に追加しようとしています。ここにサンプルコードがあります

<div ng-repeat="stylesheet in stylesheets">
        <link href="/myapp/{{stylesheet.href}}" type="{{stylesheet.type}}" rel="stylesheet" media="{{stylesheet.media}}" title="{{stylesheet.title}}" />
</div>

このコードは期待どおりに機能しますが、ブラウザーがページをロードするときに、未加工の angularjs テンプレートを使用して css リソースをフェッチしようとし、firebug のネットワーク タブに「404 not found エラー」が表示されます。

Eg: request http://localhost:8080/myapp/%7B%7Bstylesheet.href%7D%7D, status 404

ページが完全にロードされると、テンプレート値の置換が行われ、適切な css がロードされます。

404 エラーを回避し、angularjs 処理後に css をロードする方法はありますか?

4

5 に答える 5

31

hrefの代わりにng-hrefを使用する必要があります。

<link ng-repeat="stylesheet in stylesheets" ng-href="{{stylesheet.href}}" type="{{stylesheet.type}}" rel="stylesheet" />

例

于 2012-08-11T08:22:37.647 に答える
0

AngularJS を使用して実行時に真に動的な CSS を作成したい人のために、これを使用しました。

index.html

<head> <style type="text/css" ng-bind-html="styles"></style> </head>

cssサービス

this.$rootScope.myStyles = ".test { color : red; }";

これは単なる例です。スタイルがある場合は、スタイルを indexController に入れて、$rootScope

于 2016-12-15T15:26:32.960 に答える