我目前有一个 API 可以返回一个 CSS 文件的 url，我想将该文件包含到我的整个网站中。对此网址进行更改，我无法对网址进行硬编码。我目前在“view1”上工作，但我想做的是让它在整个网站上工作。 (因此尝试在 index.html 中实现它)。我不确定最好的方法是什么，而且我确信我的方法是错误的。任何见解都会有所帮助，或解决我的问题。
我的应用程序采用休闲格式。
app/ --> all of the source files for the application
app.css --> default stylesheet
components/ --> all app specific modules
API/ --> Mock Slim API for testing
index.php --> Root for the API
view1/ --> the view1 view template and logic
view1.html --> the partial template
view1.js --> the controller logic
view1_test.js --> tests of the controller
view2/ --> the view2 view template and logic
view2.html --> the partial template
view2.js --> the controller logic
view2_test.js --> tests of the controller
app.js --> main application module
index.html --> app layout file (the main html template file of the app)
这是当前正在工作的 View1
JS
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope', '$http', function($scope, $http) {
$http.get('/api/auth/test').
then(function(response) {
$scope.css = response.data.temp.css;
}, function(response) {
alert('Error retrieving css: ' + response);
});
}]);
HTML
<head>
<link ng-attr-href="{{css}}" rel="stylesheet" type="text/css">
</head>
这是我无法运行的根文件
JS
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.authentication',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$routeProvider','$httpProvider','$locationProvider', function($routeProvider, $httpProvider, $locationProvider) {
$httpProvider.interceptors.push('TokenInterceptor');
// intercept API 401 responses and force authentication
$httpProvider.interceptors.push(function ($q, $location, AuthenticationService) {
//some code has been removed here
});
$routeProvider.otherwise({redirectTo: '/view1'});
}])
/*This is part of a test*/
.controller('', ['$scope', '$http', function($scope, $http) {
$http.get('/api/auth/test').
then(function(response) {
$scope.css = response.data.temp.css;
}, function(response) {
alert('Error retrieving css: ' + response);
});
}]);
/*This is part of a test*/
HTML
<head>
<link ng-attr-href="{{css}}" rel="stylesheet" type="text/css">
</head>
Question 1: Is there a better way of doing this? <-this is what I want
Question 2: If not, why is this not working? <- will settle for
我的猜测是 HTML 在 JS 之前运行，当 JS 运行以将 {{css}} 更改为正确的响应时，为时已晚，无法包含它。但如果是这样，为什么它适用于 View1 而不是根索引？
最佳答案
我先回答你的问题2。
当 Angular 启动时，它会首先向下遍历 DOM 节点，然后寻找所有合适的指令，评估它们，编译并最终将它们链接起来。您的第二段代码不起作用的原因是因为您的 {{css}}计算结果为空，因为它没有合适的 scope绑定(bind)到。
您实际上可以做的是声明一个 ng-controller在你的<head>水平，让这个 Controller 完成它的工作。像这样:
.controller('cssCtrl',['$scope','$http', function($scope,$http){
$http.get('/api/auth/test').
then(function(response) {
$scope.css = response.data.temp.css;
}, function(response) {
alert('Error retrieving css: ' + response);
});
}]
在你的 html 中:
<head ng-controller="cssCtrl">
<link ng-attr-href="{{css}}" rel="stylesheet" type="text/css">
</head>
这是一个plnkr这演示了如何。
ng-controller在这里会派上用场，因为您实际上不必定义 route就其本身而言。请注意，您的 css 直到您的 Angular Bootstrap 完成并且您的 cssCtrl 才会被加载。被实例化。但这会有一些延迟，因此我们的第一个问题是，我们有更好的方法吗？
我会说，如果您真的有基于 Angular 应用程序本身的条件表示逻辑，那么请使用 ng-if和 ng-class .如果您需要更多低级别的，请使用 ng-style .
如果您谈论的是根据某些配置/设置真正加载整个新 css 样式表，那么我会说，让服务器(后端)处理它。服务器会根据配置决定加载什么样的css(可能不同地区的app有不同的css样式)并生成它的站点。您的前端应用程序( Angular )将只需要监听服务器，并在不真正消化它的情况下加载。
当然，这不是 100% 最好的方法。如果你真的需要一个前端确定的 css，那就去做吧，并以这种方式设计应用程序!只有您清楚该应用程序的用例。也许你可以将整个 SPA 包装成一个 MainCtrl和 MainView ，并让每个配置在操作 DOM 之前先解析。
关于javascript - AngularJS 使用 JS 从 API 设置 CSS 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32762356/