How to access the values set in an Angular JS template directive such as “ng-class?”

Question

^{Preface: I am looking for a 100% clean/native Angular JS solution to this issue that uses the Angular JS framework's functionality itself and not a kludge/hack that would search the DOM for ng-class values.}

So I have a template that is set something like this:

<div class="stuff" ng-class="{ 0: 'default', 1: 'thing_1', 2: 'thing_2', 3: 'thing_3', 4: 'thing_4', 5: 'thing_5' }[thingType]">

I understand that in my controller that handles that DIV, I can assign a value such as this; which would result in thing_2 being added to my DIV's class of stuff :

$scope.thingType = 2;

Which is great! But is there any way in my controller I can get the values set in that ng-class template directly? I assume that is JSON being passed into the guts of Angular, but it would be nice if—within the controller—I could count the values of what I am setting in the template.

All I am trying to do is to get that ng-class JSON blob into the controller. The goal would be if I were to set multiple class options within the template—such those with keys numbered from 0 to 5 —and somehow I decided to add a 6th option to the CSS JSON, it would be nice if the controller itself could actually count the number of keys on its own instead of my having to adjust one value in a template and the adjust other values in the controller.

Regardless of what one thinks of this approach, is there any easy/clean way to do this? And is there a way to do this that uses Angular logic itself without having to resort to creating a kludge that would search the DOM outside of Angular with a directive and such? I am looking for the cleanest and Angular native solution that exists if one such solution exists .

Answer 1

<div ng-class="myJson">

$scope.myJson = { 0: 'default', 1: 'thing_1', 2: 'thing_2', 3: 'thing_3', 4: 'thing_4', 5: 'thing_5' }[thingType];

Now you have it both in your template and in your controller so you can do whatever you want with it.

Another solution could be to create a directive which picks up the ng-class , store it in a service which the controller can then pick up and parse as JSON:

<div id="myDiv1" ng-class="{ 0: 'default', 1: 'thing_1', 2: 'thing_2', 3: 'thing_3', 4: 'thing_4', 5: 'thing_5' }[thingType]"></div>

angular.module('myApp', [])
  .service('myService', [function() {

    var data = {};

    this.set = function(k, v) {
      data[k] = v;
    };

    this.get = function(k) {
      return k ? data[k] : data;
    };
  }])
  .directive('myDirective', ['myService', function(myService) {

    return {
      restrict: 'A',
      link: function(scope, element, attrs) {

        var ngClasses = element.getAttribute('ng-class');

        myService.set(element.getAttribute('id'), ngClasses);
      }
    }
  }])
  .controller('MyCtrl', ['myService', function(myService) {

    var id = 'Use a common id for your DIV which is also available here';

    // Now you will have the ngClasses as JSON as well as keep the template markup
    var ngClasses = JSON.parse(myService.get(id));
  }]);

Answer 2

I dont understand how is this going to work , because ng-class directive does not work like this:

<div class="stuff" ng-class="{ 0: 'default', 1: 'thing_1', 2: 'thing_2', 3: 'thing_3', 4: 'thing_4', 5: 'thing_5' }[thingType]">

I mean, ng-class gets an object that you first declare the class name and then you add the expression (which is usually a condition), like this (with two classes):

//this is going to add 'default' class if isActive is true and 'thing_1' accordingly
<div ng-class="{default: isActive, thing_1: isActiveThing1}"></div>