9

我面临的问题与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 ；我能做些什么吗？这没什么大不了的，但如果我能解决它仍然会更好。

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

索引.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>

应用程序.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();

控制器.js：

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

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

4

3 回答 3

7

我通过向标签添加一个ngIf指令来解决它link，所以它不会被渲染，直到filename它不是假的。我知道有点脏，但它确实有效！

<link rel="stylesheet" data-ng-if="filename" data-ng-href="css/{{ filename }}.css" />
于 2013-08-29T16:58:59.627 回答
1

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

算法：

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]);
    });

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

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

编辑：

通过 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';
});
于 2013-08-29T15:36:04.567 回答
0

顺便提一句

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 属性。

然后您的代码通过正常的浏览器呈现机制切换为可见。

于 2013-08-29T15:42:45.733 回答