Динамическое изменение CSS AngularJS

Question

Я хочу изменить стиль любого класса внутри otc-динамически, один раз и динамически. Поскольку стили CSS поступают из Web Api. Есть ли способ javascript, который может это сделать?

Спасибо за тех, кто будет помогать

Этот мой HTML:

<accordion close-others="false"> 
    <div> 
     <accordion-group class="div-recipe-header"> 
      <accordion-heading></accordion-heading> 
       <my-directive></my-directive> 
       <div otc-dynamic> 
        <div class="div-recipe-name"></div> 
         <div class="div-recipe-cost"></div> 
       </div> 

     </accordion-group> 
    </div> 
    </accordion> 

Примеры данных из Json (я кладу данные в переменной usercss)

usercss = '.div-recipe-cost{position: absolute;top: 0;left: calc(100% - 85px);bottom: 0;overflow:padding-top: 5px;padding-bottom: 5px;padding-right: 0;font-family: 'Segoe UI', 'Open Sans', 'Roboto', 'Lucida Grande', 'Helvetica', 'Arial', 'sans-serif';font-size: small;background: none;overflow: hidden;font-weight: bold;} .div-recipe-name{position: absolute;top: 0;left: 12px;bottom: 0;width: calc(100% - 0px);padding-top: 5px;padding-bottom: 5px;padding-right: 0;height: calc(100% - 0px);font-family: 'Segoe UI', 'Open Sans', 'Roboto', 'Lucida Grande', 'Helvetica', 'Arial', 'sans-serif';font-size: large;background: none;overflow: hidden;} ' 

Answer 1

Похоже, вы делаете обратное?

Вы назначили класс элементам. а затем загрузите стиль каждого класса позже из JSON.

Вы можете просто вставить этот стиль вам документ

usercss = '.div-recipe-cost{position: ab........'; // Your css 

var css = document.createElement("style"); 
css.type = "text/css"; 
css.innerHTML = usercss; 
document.body.appendChild(css); 

Answer 2

Используйте ng-class. Это позволит вам динамически устанавливать классы. Кроме того, вы можете использовать тройные операции с ng-классом, как показано here.

Я предполагаю, что у вас есть классы, определенные в стильном листе, который загружается в память.

.white{ 
     color: #ffffff; 
    } 
    .black{ 
     color: #000000; 
    } 

В вашем угловом контроллере вы можете указать переменную, которая будет содержать ваше имя класса. Здесь я устанавливаю его, чтобы применить «белый» по умолчанию.

$scope.myClass = "white"; 

Затем в вашей разметке вы просто привязываете эту переменную к элементу с помощью ng-класса.

<div ng-class="myClass">....</div> 

Теперь, когда $ scope.myclass изменяет соответствующий класс будет добавлен в DIV и старый класс будет удален. Таким образом, в вашем контроллере вы будете иметь что-то, что вызовет изменение ...

if(some_condition){ 
    $scope.myClass = "black"; 
} else { 
    $scope.myClass = "white"; 
} 

Answer 3

Вместо того, чтобы получать содержание всего CSS просто получить имя динамического класса из бэкэнда JSON. Сохраните определение класса в локальном файле, а затем примените его динамически через ng-class директива