javascript - 在 head 元素中附加子元素时如何将 Controller 范围变量传递给 angular.element

Question

你好，

所以我们有以下 Controller :

'use strict';

angular.module('24SevenWse')
  .controller('NavbarCtrl', ['$scope', 'dataFactory', function ($scope, dataFactory) {
      $scope.user = dataFactory.getUser();
      $scope.code = dataFactory.getCode();
      }
      var companyLink = angular.element('<link rel="stylesheet" href="http://localhost/~jw1050/css/$scope.code.css">');
      angular.element('head').append(companyLink);


  }]);

如您所见，我将一个新的样式表附加到页面的 head 元素。现在，当我硬编码值时，例如:

var companyLink = angular.element('<link rel="stylesheet" href="http://localhost/~jw1050/css/ABC.css">');

但是，我正在尝试根据用户登录软件时使用的代码通过 CSS 加载新图像。

现在，这是针对以下的 View :

<nav class="navbar navbar-fixed-top" ng-controller="NavbarCtrl">
  <div class="container-fluid">
        <div class="navbar-header pull-left">
          <a class="navbar-brand tracking-navbar-brand newImage">
              <img id="custLogo">
          </a>
        </div>
      </div>
</nav>

被注入(inject)头部的 .css 文件仅包含以下内容:

#custLogo {
    content: url("http://localhost/~jw1050/logos/logo.png");
}

每个 .css 文件都将以用户可以用来登录的代码命名。例如，用户使用代码 ABC 登录。该代码将直接对应于文件 ABC.css

所以我需要通过 Controller 将代码传递给 var companyLink，这样附加到文档头部的样式表将是:

<link rel="stylesheet" href="http://localhost/~jw1050/css/ABC.css">

现在我在 Controller 中尝试了以下操作:

var companyLink = angular.element('<link rel="stylesheet" href="http://localhost/~jw1050/css/{{code}}.css">');
var companyLink = angular.element('<link rel="stylesheet" href="http://localhost/~jw1050/css/'{{code}}'.css">');

似乎都不起作用。我的想法是我附加到头部的链接是 View 的一部分。所以应该可以通过controller中的代码来查看，但是好像不行。

有什么想法吗？

Answer 1

试试这个:

var companyLink = angular.element('<link rel="stylesheet" href="http://localhost/~jw1050/css/'+$scope.code+'.css">');