Как передать переменную в области видимости контроллера для angular.element при добавлении дочернего элемента в элементе головки

Question

Howdie сделать,

Итак, мы следующий контроллер:

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


    }]); 

Как вы можете видеть, я добавление новую таблицу стилей на элемент головы на странице. Теперь, когда я жестко закодировать значение, например:

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

The .css файлы будут каждый из них будет называться после кода, с которым пользователь может войти. Например, пользователь входит в систему с кодом ABC. Этот код будет соответствовать непосредственно к файлу ABC.css

Так что мне нужно передать код с помощью контроллера в вар 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-манипуляцию в директиву, а в контроллере вы можете просто обрабатывать данные (через сервис/фабрику, конечно), привязывая его к переменной области видимости и передавая ее в директиву.