Использование угловых для изменения настроек класса

Question

Существует много информации о том, как использовать элементы ng-class и ng-style. Но мне было интересно, есть ли способ использовать угловое изменение «настроек» класса.

Так, например, сказать, что у вас есть класс CSS, который выглядел следующим образом:

.testclass { 
    color: red; 
    background-color: blue; 
} 

Я хочу использовать угловую изменить цвет: красный в цвет: черный, без крепления углового в HTML DOM объект, но вместо этого вместо класса.

ОК, это не очень полезный пример. То, что я действительно планировал использовать для этого, было скрыть часть ck-редактора (класс cle_top), и я хочу, чтобы весь класс был скрыт, когда кто-то нажимает кнопку (и видимо, если щелкнуть ее снова).

======== Чтобы было понятнее, это немного HTML Я хочу, чтобы скрыть =======

<span id="cke_1_top" class="cke_top cke_reset_all" role="presentation" style="height: auto; -webkit-user-select: none;"><span id="cke_8" class="cke_voice_label"> 
     Editor toolbars</span><span id="cke_1_toolbox" class="cke_toolbox" role="group" aria-labelledby="cke_8" onmousedown="return false;"> 
      <span id="cke_11" class="cke_toolbar" aria-labelledby="cke_11_label" role="toolbar"><span id="cke_11_label" class="cke_voice_label"> 

Но мне нужно, чтобы сделать это, не будучи в состоянии для добавления угловых крючков в код HTML (например, добавление ng-класса в span, что было бы простым решением)

Прилагается JSfiddle, который показывает мою проблему, и, как вы можете видеть, кнопка на панели инструментов ничего не делает , http://jsfiddle.net/vrghost/uqvo3ceh/

Какой вид работ сейчас, он добавляет класс, невидимый для пролета, однако он не скрывает пробел, на который он смотрит. Использовать тот же процесс на тестовом тексте, и он работает ...

Answer 1

If любой хотел знать, как это сделать, возможно, это может быть полезно и для других вещей.

Создал функцию, которая использует document.querySelector для поиска элемента, а затем просто включите или включите переключатель, и это, как говорится, это люди.

$scope.toolBarVisible = function(){ 
    console.log("Changing visibility"); 
    var element = document.querySelector('.cke_top'); 
    console.log("Just to do some debugging we check " + element); 
    var myEl = angular.element(element); 
    myEl.toggle(); 
    element = document.querySelector('.cke_bottom'); 
    myEl = angular.element(element); 
    myEl.toggle(); 

    var myEl2 = angular.element(document.querySelector('.test')); 
    myEl2.toggleClass("invisible") 

} 

А для тех, кто ищет близко, да, она скрывает дно, а также, и все без изменения CKEditor или код. Надеюсь, кто-то сочтет это полезным.

Answer 2

Почему бы просто не переключить класс вкл/выкл для этого элемента, когда пользователь нажимает кнопку? (Edit: Вы сказали, что хотите «скрыть весь класс до скрытого». Предполагаю, вы хотите удалить класс?)

Чтобы ответить на ваш вопрос, вы можете сделать это с помощью JavaScript с помощью document.styleSheets.

См. this Stack Overflow question и blog post. В нем упоминается, что могут быть проблемы с совместимостью с браузером. Я этого не исследовал.

EDIT: This implementation 'ng-toggle' позволит вам скрыть или показать элемент с помощью одной кнопки.

Answer 3

Не знаю ничего, что отредактирует сам класс, но, вероятно, вы этого не хотите. Другие варианты:

1) Создайте второй класс, который появляется после первого в вашем файле CSS, который добавляет/изменяет свойства, которые вы хотите. Пример:

.testclass { 
    color: red; 
    background-color: blue; 
} 
.newclass { 
    color: green; // change property in first CSS class 
    display: none; // or hide 
} 

Затем нанесите второй класс условно:

<div class="text-class" ng-class="{newclass: hideScopeFlag}">blah</div> 

2) Просто используйте нг-если, нг-скрыть или нг-шоу, если все, что вы делаете что-то скрывает.Пример:

<div class="text-class" ng-hide="hideScopeFlag">blah</div> 

или

<div class="text-class" ng-show="!hideScopeFlag">blah</div> 

Answer 4

Самое простое решение, не баловаться с таблицами стилей, чтобы добавить новое правило, как

.visibleOff .testclass { 
    color: black; 
} 

, а затем вам просто нужно переключить «visibleOff» класс в родительском элементе (оболочке или элементе body) редактора.

Answer 5

Чтобы скрыть определенные элементы в DOM, вы также можете использовать переменную $ scope, которая действует как логическая. Вы можете установить его значение false по умолчанию, а при нажатии кнопки - переключить его в true и назад.

$scope.hidden = false; 
$scope.toggleHide = function(){ 
$scope.hidden = !$scope.hidden; 

} 

В вашем йот вы можете обернуть элемент с нг-шкура = "скрытый" атрибут как так:

<div ng-hide="hidden">...</div> 
<button ng-click="toggleHide()">togglehide</button> 

Пример из plunker можно найти здесь: http://plnkr.co/edit/?p=preview