I have currently a problem with an angularjs app that needs to load different stylesheets while runtime. I currently build an angular editor that as a endresult while put out a completly on its own functional angular app. While editing the different masks there must be loaded different stylesheets, one for each mask, one for the template and one global that holds the global styling. I don't know why, but it only works once when first time a stylesheet gets loaded. The other stylesheets get cached but the rules are not applied to the elements. On the backend I have runing a node js webserver with socket.io the stylesheets get loaded over normal get over REST-Api. I really have no idea, will be very thankful if anybody can help me on this.
Here is my code of the cssService that should add the stylesheet:
###
*Here we add a stylesheet to the header
*@param appData this is the object from builtApp service
*@param styleSheetType this is type of stylesheet that should be added we have global and custom
*@author Sebastian Zankel (sez_e@hoeft-wessel.de)
###
_addStyleSheet = (appData, styleSheetType)->
port = 8081
protocol = window.location.protocol
hostname = window.location.hostname
###Get the parts of the url###
t = $location.absUrl().split("/")
###Get name of the template###
viewType = t[t.length-2]
###We save the file as json###
fileType = 'css'
###foldername we currently work in###
folder = t[t.length-1]
###Empy the style tag###
angular.element('head').find('#style').html()
if viewType.toString().toLowerCase() is "template" and (styleSheetType is undefined or styleSheetType is null)
fileName = 'template.css'
style = document.createElement( 'link' );
style.rel = 'stylesheet'
style.type = 'text/css'
style.title = viewType.toString().toLowerCase()
style.href = protocol + '//' + hostname + ':' + port + "/file/" + viewType + "/" + folder + "/" + fileType + "/" + fileName + "?v=1." + Math.round(Math.random() *100)
#angular.element('link[title="' + viewType.toString().toLowerCase() + '"]').attr('disabled', 'disabled').remove()
document.getElementsByTagName( 'head' )[0].insertBefore(style, document.getElementById("style"))
#angular.element('head').prepend('<link rel="stylesheet" title="' + viewType.toString().toLowerCase() + '" href="' + protocol + '//' + hostname + ':' + port + "/file/" + viewType + "/" + folder + "/" + fileType + "/" + fileName + '" type="text/css" />');
else if styleSheetType is "global" or styleSheetType is "superglobal"
#angular.element('link[title="' + styleSheetType + '"]').attr('disabled', 'disabled').remove()
style = document.createElement( 'link' );
style.rel = 'stylesheet'
style.type = 'text/css'
style.title = styleSheetType
style.href = protocol + '//' + hostname + ':' + port + "/stylesheet/app/" + appData.appName + "/" + (if appData.globalStylesheet is undefined or appData.globalStylesheet is null then appData.baseStyleSheet else appData.globalStylesheet) + "?v=1." + Math.round(Math.random() *100)
document.getElementsByTagName( 'head' )[0].insertBefore(style, document.getElementById("style"))
#document.createStyleSheet(style.href) IE specific
$timeout ->
$rootScope.$apply()
, 0
#angular.element('<link rel="stylesheet" title="' + styleSheetType + '" href="' + protocol + '//' + hostname + ':' + port + "/stylesheet/app/" + appData.appName + "/" + (if appData.globalStylesheet is undefined or appData.globalStylesheet is null then appData.baseStyleSheet else appData.globalStylesheet) + '" type="text/css" />').insertBefore('#style')
#angular.element('head').append('<link rel="stylesheet" title="' + styleSheetType + '" href="' + protocol + '//' + hostname + ':' + port + "/stylesheet/app/" + appData.appName + "/" + appData.baseStyleSheet + '" type="text/css" />');
else if styleSheetType.indexOf("mask") > -1
angular.element('link[title="' + styleSheetType + '"]').attr('disabled', 'disabled').remove()
angular.element('<link rel="stylesheet" title="mask" href="' + protocol + '//' + hostname + ':' + port + "/stylesheet/mask/" + appData.appName + "/" + styleSheetType + '" type="text/css" />').insertAfter('title')
null
Here is the nodejs code:
app.get "/stylesheet/:viewType/:appName/:viewName", fileHandling.serveStylesheet
###
*This is for serving the stylesheet of an app
*@param req The request object
*@param res The response object
*@author Sebastian Zankel
###
serveStylesheet = (req, res)->
console.log "here"
res.header("Access-Control-Allow-Origin", "*")
viewType = req.params.viewType
appName = req.params.appName
viewName = req.params.viewName
###TODO: That will be the logic later when design is finished###
if viewType is "app"
file = __dirname + "../../webserver/apps/" + appName + "/editor/stylesheets/" + viewName
else if viewType is "mask"
file = __dirname + "../../webserver/apps/" + appName + "/editor/views/" + viewName.split('.')[0] + "/css/" + viewName
console.log "stylesheet"
res.writeHead(200, {'Content-Type': 'text/css'})
res.write(fs.readFileSync(file, 'utf8'))
res.end()
I really have no clue, why it works once and then second time it won't work. Please help somebody.
Regards,
Sebastian