0

There is a lot of information on how to use ng-class and ng-style on elements. But I was wondering if there is a way to use angular to change the "settings" of a class.

So for example, say that you had a css class that looked as follows:

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

I want to use angular to change the color:red to color:black, without attaching angular to the HTML DOM object, but via the class instead.

OK, this isn't a very useful example. What I was really planning to use it for was to hide part of ck-editor (class cle_top) and I want to set the whole class to hidden when someone clicks a button (and visible if the click it again).

======== To make it clearer, this is the bit of HTML I want to hide =======

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

But I need to do it without being able to add angular hooks in the HTML code (like adding ng-class to the span, which would have been a simple solution)

Attached is a JSfiddle that shows my problem, and as you can see, the toolbar button does nothing. http://jsfiddle.net/vrghost/uqvo3ceh/

Which kind of works now, it adds the class invisible to the span, however, it does not hide the span that it is looking at. Use the same process on a test text and it works...

vrghost
  • 1,084
  • 2
  • 19
  • 42

5 Answers5

0

Why not simply toggle the class off/on for that element when the user clicks the button? (Edit: You said you want to "set the whole class to hidden" - I am assuming you mean to remove the class?)

To answer your question though, you can do this with JavaScript using document.styleSheets.

See this Stack Overflow question and the blog post it references. It mentions that there may be some browser compatibility issues. I have not investigated this.

EDIT: This implementation of 'ng-toggle' will allow you to hide or show an element with a single button.

Community
  • 1
  • 1
akoinesjr
  • 288
  • 2
  • 5
  • OK, should have been clear, I wanted to save my self some headache, so the ckeditor have a number of elements (both id and class), I doubt I can change them on load, and preferably I would like to avoid doing that, so thought I would shortcut by just picking up the class where that is for the whole toolbar (cke_top) then set it to display: none; and voila, I have hidden the toolbar for the user, if they want it back, press again, and there it is. – vrghost Sep 12 '15 at 16:03
  • I'm not sure I completely understand what you're saying, but maybe ng-style is what you are looking for? (See the live example at the following link) https://docs.angularjs.org/api/ng/directive/ngStyle You could use this to apply "display: none;" on click. – akoinesjr Sep 12 '15 at 16:08
  • Added some comments on the question. My problem is that I can't connect angular straight to the object to add classes. So either if I can search the dom tree to "pick up" the object and hide it or similar. – vrghost Sep 13 '15 at 04:56
0

Don't know of anything that will edit the class itself, but that probably isn't want you want to do. Other options are:

1) Create a second class, that comes after the first one in your CSS file that adds / changes the properties you want. Ex:

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

Then apply the second class conditionally:

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

2) Simply use ng-if, ng-hide, or ng-show if all you are doing is hiding something. Ex: 

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

or 

<div class="text-class" ng-show="!hideScopeFlag">blah</div>
Mike
  • 335
  • 4
  • 20
0

The simplest solution without messing with the stylesheets is to add a new rule like 

.visibleOff .testclass {
    color: black;
}

and then you just need to toggle the "visibleOff" class on a parent element (the wrapper or the body element) of the editor.

AlfonsoML
  • 12,634
  • 2
  • 46
  • 53
  • This seems to be exactly what I am looking for, but how do I add that visbbleOff class by id or class. – vrghost Sep 13 '15 at 05:00
  • If you're targetting only current browsers you can do it with plain javascript, 'document.querySelector("#elementId").classList.toggle("visibleOff");' otherwise use your js framework of choice. – AlfonsoML Sep 13 '15 at 11:20
0

To hide certain elements in the DOM you can also use a $scope variable that acts as a boolean. You can set it to false by default and on button click toggle it to true and back.

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

}

In your dom you can then wrap your element with an ng-hide="hidden" attribute like so:

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

A plunker example can be found here: http://plnkr.co/edit/?p=preview

jo v
  • 302
  • 5
  • 14
0

If anyone wanted to know how to do this, potentially this could be useful for other things as well.

Created a function that uses document.querySelector to find the element, then just do a toggle to turn on or of, and that, as they say, is it folks.

$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")

}

And for those that are looking closely, yes, it hides the bottom as well, and all without changing ckeditor or the code. Hope someone finds it helpful.

vrghost
  • 1,084
  • 2
  • 19
  • 42