Question

我有一个AngularJS SPA。在应用程序的初始化过程中，我从服务器获取了一个主题，其中包含几个CSS URL。

我想使用这些，如果是404，则回退到默认值。

我认为我可以设置一个简单的指令来完成此任务，但我无法让它正常工作。

.directive('errorHref', function() {
    return {
        link: function(scope, element, attrs) {
            element.bind('error', function() {
                attrs.$set('ng-href', attrs.errorHref);
            });
        }
    }
});

HTML：注意，控制器正在工作;但是，headController中的_init事件在其他所有事件之前都会触发。

<html ng-app="timeclock">
    <head ng-controller="headController">
        <link ng-href="{{urlToAppCSS}}" error-href="content/css/app.css" rel="stylesheet">

这是正确的方法还是有更好的方法？一切似乎应该正常运行（并且在我的应用程序的其他部分几乎完全相同的情况下工作），但element.bind('error'...函数实际上从未触发过。

Answer 1

我不确定<link>元素是否会触发错误事件。所以我建议使用指令和<style>元素。请注意，有很多方法可以做这样的事情，这只是一个过于简化的例子：

.directive('customStyle', function($http) {
    return {
        restrict: 'E',
        scope: {
            href: '@',
            fallback: '@'
        },
        link: function(scope) {
            $http.get(scope.href)
                    .then(function(response) {
                        // Take the contents of the response and place into
                        // a scope variable for use in the template
                        scope.css = response.data;
                    })
                    .catch(function(response) {
                        // The request failed, so instead try loading from scope.fallback url.
                    });
        },
        template: '<style>{{ scope.css }}</style>'
    }
});

HTML：

<custom-style href="{{ urlToAppCSS }}" fallback="content/css/app.css"></custom-style>

您可能希望同时加载后备CSS，以便在请求的CSS文件无法加载的情况下不会有很长的延迟，但这可能是一个很好的起点。

Answer 2

我最终保持它基本只是在我的控制器中进行$ http调用并在需要时更改href值，似乎非常干净。将硬编码的CSS加载到链接标记中，然后当我的主题被加载时，触发控制器代码的事件触发，在$ http成功时交换href值。

<link id="appCSS" href="content/css/app.css" rel="stylesheet">

控制器

        var appCSS = angular.element('#appCSS');

        // Try appCSS
        $http.get(theme.urlToAppCSS).then (function (response) {
            // GET succeeded, load up new CSS
            appCSS.attr('href', theme.urlToAppCSS);
        }, function (err) {
            // GET failed, keep default CSS in place
        });

在AngularJS中的index.html上加载动态CSS

2 个答案: