javascript - CSS 文件没有通过 ng-href 动态加载

标签 javascript html css angularjs

我正在尝试使用 ng-href 将不同的 css 样式动态加载到我的页面中,但页面并未使用激活的样式进行更新。代码如下:

<html ng-app="myapp" ng-controller="myController as myctrl">
    <head>
        <link rel="stylesheet" ng-href="../assets/css/{{ myctrl.style }}.css">
    </head>
</html>

在我的 Controller 中,我执行以下操作:

vm.style = "redStyle";
pub.subscribe('style', function(theStyle) {
    vm.style = theStyle;
});

一旦发布发生,subscribe 中的变量就会使用新样式进行更新。但相应的 css 文件未加载,因此页面上的样式已更新。我错过了什么想法吗?

最佳答案

Here is a working demo

它与您所拥有的非常相似,因此它是您代码中的其他内容。除非你把所有的代码都贴出来,否则很难说。

假设样式表确实存在,并且样式变量正在更新,那么我的猜测是罪魁祸首是

pub.subscribe()

如果这个回调是由 Angular 之外的东西触发的,那么 Angular 将看不到更新的变量。您可以将其带回 Angular 空间,如下所示:

pub.subscribe('style', function (theStyle) {
  $scope.$apply(function(){
      vm.style= theStyle; 
  });               
});

关于javascript - CSS 文件没有通过 ng-href 动态加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45372663/

相关文章:

php - 将 XMLHttpRequest.responseText 保存在变量中

javascript - 在 HTML 中使用数组命名输入字段时——如何计算数组长度?

javascript - 语义下拉 100% 宽度(左 = 0 像素)?

javascript - jQuery:单击 a,页面转到顶部

asp.net-mvc - 如何在 ASP.NET-MVC 5.2 中对文本输入字段使用 HTML5 原生验证规则?

python - 如何在 Pandas 中编辑标题行 - 样式

javascript - Attributes.Add Onclick Event in c# code behind

javascript - 如何在angularjs中使用ng-repeat在css中动态设置表格列的宽度

html - 如何使用react中的material ui在屏幕右下角添加 float 操作按钮

javascript - 从右侧而不是左侧的侧边栏导航