Question

我面临的问题与Conditionally-rendering css in html head

中描述的问题类似（但不一样，请耐心等待我）

我也“懒洋洋地”加载样式表，从我在控制器的最开始初始化的范围变量中获取文件名：

<link rel="stylesheet" data-ng-href="css/{{ filename }}.css" />

当我使用ng-href（此处为data-形式）时，我确实避免了不需要的请求，例如：

http://localhost/css/%7B%7B%20filename%7D%7D.css

但这一切仍然很快发生，而且我几乎每次都会得到这个：

http://localhost/css/.css

这似乎意味着请求会在Angular删除自己的标记的时刻和之间触发，然后用正确的值替换它（一会儿之后，然后我的样式表加载正确）。我估计它甚至不可能......！

我想我可能会为filename范围变量提供一个值太晚，但正如我所说，这是我在控制器中做的第一件事：

angular.module('myControllers', []) .controller('TestCtrl', ['$scope', function($scope) { $scope.filename = 'test'; // some more code... }]);

我正在使用Angular 1.1.5;有什么我可以做的吗？这不是什么大不了的事，但如果我能解决它仍然会更好。

编辑：根据要求提供完整的代码。我不会包含页面模板，因为它们与此问题无关。

index.html：

<!DOCTYPE html> <html lang="en" data-ng-app="myapp"> <head> <meta charset="utf-8" /> <title>My App</title> <link rel="stylesheet" data-ng-href="/assets/css/{{ filename }}.css" /> </head> <body> <div id="app" class="app" style="display: none;" data-ng-view></div> <script src="/assets/js/lib/angular/angular.min.js"></script> <script src="/assets/js/app/app.js"></script> <script src="/assets/js/app/controllers.js"></script> </body> </html>

app.js：

var app = angular.module('myapp', ['myControllers']) .config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) { $locationProvider.hashPrefix('!'); $routeProvider .when('/', { templateUrl: 'path/to/my/template.html', controller: 'TestCtrl' }) .otherwise({ redirectTo: '/' }); }]); app.run();

controllers.js：

angular.module('myControllers', []) .controller('TestCtrl', ['$scope', '$rootScope', function($scope, $rootScope) { $rootScope.filename = 'stylesheet'; }]);

（是的，我尝试使用空控制器，就像这个问题一样。）

Answer 1

我通过向ngIf标记添加link指令解决了这个问题，因此在filename不是假的情况下才会呈现它。有点脏，我知道，但它确实有效！

<link rel="stylesheet" data-ng-if="filename" data-ng-href="css/{{ filename }}.css" />

Answer 2

在一个小例子中为我工作。

那个算法：

attr.$observe(normalized, function(value) {
      if (!value)
         return;

      attr.$set(attrName, value);

      // on IE, if "ng:src" directive declaration is used and "src" attribute doesn't exist
      // then calling element.setAttribute('src', 'foo') doesn't do anything, so we need
      // to set the property as well to achieve the desired effect.
      // we use attr[attrName] value since $set can sanitize the url.
      if (msie) element.prop(attrName, attr[attrName]);
    });

如果该值为false，则该函数立即返回，例如未定义。

你能发布完整的代码，应该是另一个问题。

编辑：

通过Route-Provider绑定控制器只能使用ng-view元素将此控制器绑定到您的元素。

你可以这样做：

HTML：

<head ng-controller="HeadCtrl">
<link rel="stylesheet" data-ng-href="{{ filename }}.css">
</head>

JS：

app.controller("HeadCtrl",function ($scope)
{
$scope.filename = 'apartment';
});

Answer 3

顺便说一下

ng-cloak没有“开火”来隐藏某些东西。你必须为它添加一个CSS类。

http://docs.angularjs.org/api/ng.directive:ngCloak

[ng\:cloak], 
[ng-cloak], 
[data-ng-cloak], 
[x-ng-cloak], 
.ng-cloak, 
.x-ng-cloak {
   display: none !important;
}

请不要内联css请：）

它是一个简单的指令，在角度完成加载并开始解释指令时删除ng-cloak属性。

然后通过正常的浏览器渲染机制将代码切换为可见。

AngularJS：动态样式表链接标记过早触发请求

3 个答案: