Question

Howdie do，

所以我们有以下控制器：

'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加载新图像。

现在，以下是：

<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>

正在注入头部的.css文件只包含以下内容：

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

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

所以我需要通过控制器将代码传递给var companyLink，以便附加到文档头部的样式表将是：

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

现在我在控制器中尝试了以下内容：

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">');

似乎都没有用。我的想法是，我附加到头部的链接是视图的一部分。所以它应该能够传递控制器中的代码来查看，但这似乎不起作用。

有什么想法吗？

Answer 1

试试这个：

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

Answer 2

一般来说，你想避免将DOM操作放在控制器中，但我只是跳过那个讲座并继续回答。

我假设$ scope.code.css的字符串值为ABC，例如。

您正在将字符串传递给angular.element，因此只需使用+运算符构建一个字符串。

var yourString = '<link rel="stylesheet" href="http://localhost/~jw1050/css/' + 
                 $scope.code.css + '">';

angular.element(yourString);

我没有对此进行测试，但据我所知，这应该可行。您甚至不必创建一个变量，您可以在angular.element调用的括号内内联它（尽管我认为很难快速阅读）。

如果此代码的唯一目的只是更改徽标，我认为有更好的方法来实现它。使用指令并传入一个url并不是一个坏主意（请参阅此处angularjs: ng-src equivalent for background-image:url(...)）。这样你就可以对指令包含DOM操作，在控制器中你可以处理获取数据（当然是通过服务/工厂），将它绑定到范围变量并将其传递给指令。

如何在head元素中追加子元素时将控制器范围变量传递给angular.element

2 个答案: