我有一个有很多视图的应用程序,这些视图的数量足以证明动态加载CSS文件是合理的,基于这些视图在当时是活动的。
我研究了各种动态“加载”带有角的CSS文件的方法,甚至找到了一个插件,尽管它的实现有点笨重。
我对一种原生的JS方式做了一些研究,并决定以一种更“角度”的方式来实现它。我把下面的服务注入线路控制器。
我的实现方法(使用服务)正确吗?若否,这类逻辑的正确地点是甚麽?
HTML:
<head>
...
<link id="library-css" href="~/Styles/libraryCSS" rel="stylesheet" type="text/css" disabled />
<link id="results-css" href="~/Styles/resultsCSS" rel="stylesheet" type="text/css" disabled />
...
</head>AngularJS服务:
myServices.service("CSSLoader", [function () {
var cssLinks = {},
linkToActivate = {};
(function init() {
//loading the <link> elements into the cssLinks object for later retrieval
cssLinks = {
library: document.getElementById("library-css"),
results: document.getElementById("results-css")
};
})();
this.loadCSS = function (cssReference, retainPreviouslyLoadedCSS) {
if (!cssReference) { throw "CSS Link must be provided.";}
if (!retainPreviouslyLoadedCSS) {
//first disables any links that are active
for (var cnt in cssLinks) {
cssLinks[cnt].disabled = true;
}
}
linkToActivate = cssLinks[cssReference];
if (!linkToActivate) { throw "CSS Link, (" + cssReference + "), that was provided cannot be found."; }
linkToActivate.disabled = false;
};
}]);谢谢!
发布于 2014-09-05 10:06:03
请找一个我为你创建的柱塞。它基于一个指令,该指令监视与其自身id相对应的范围变量。
app.directive('disablecss', function() {
return {
link: function(scope, element, attrs) {
scope.$watch('cssToSet.'+attrs.id, function(value,oldvalue) {其中,attrs.id对应于设置指令的链接id。
<link href="resultCSS.css" id="resultCSS" rel="stylesheet" disablecss />
<link href="libraryCSS.css" id="libraryCSS" rel="stylesheet" disablecss />作用域属性由与部分视图关联的控制器自动修改。
app.config(function($routeProvider) {
$routeProvider.
when('/view1', {
controller:'View1Ctrl',
templateUrl:'partial1.html'
}).
when('/view2', {
controller:'View2Ctrl',
templateUrl:'partial2.html'
}).
otherwise({redirectTo:'/'});
});
app.controller('View1Ctrl',['$scope',function($scope,$rootscope){
$scope.cssToSet.resultCSS=true;
$scope.cssToSet.libraryCSS=false;
}]);
idem for View2Ctrl如果有些东西不是clear.Bye,不要犹豫
https://stackoverflow.com/questions/25674689
复制相似问题