Search code examples
javascriptangularjsng-class

Angularjs Scope method not being called by ng-class


I am building an app. My index.html looks like:

<html ng-app='myApp'>
 <body ng-controller='mainController'>
   <div ng-view>
   </div>
 </body>
</html>

My main module js looks like:

var myApp = angular.module('myApp',['ngRoute','mycontrollers']);

myApp.directive('countTable', function(){
  return {
    restrict: 'E',
    scope: {tableType:'=tableType'},
    templateUrl: '../html/table.html'
  };
});

My Controller JS looks like:

var mycontrollers = angular.module('mycontrollers',['dataservice']);

mycontrollers.controller('mainController', function ($scope) {

   $scope.getCellColor = function (value) {
        if(value===20){
            return 'sucess';
         }           
         else {
            return 'error';
         }
   };
});

mycontroller.controller('unitTableController', function($scope,unitdata) {
  $scope.something = {data: unitdata.getData()};
});

Note that the mainController is a parent controller. unitTableController inherits from the mainController.

The directive countTable template is loaded by the unitTableController.

The table.html looks like:

 <table>
   <tr ng-repeat="row in tableType.data.rows">
      <td ng-repeat="col in row track by $index" ng-class="getCellColor(col)">{{col}}</td>
   </tr>
 </table>

The html holding the directive looks like:

<div>
  <count-table table-type='something'></count-table>
</div>

Now the directive is printing the correct data in the form it is supposed to, but the getCellColor() method in the parent mainController is not being called.

unitData is a service data gets data over rest, but here it is not of concern.

I need to the set the class of the the table cell based on the condition of value in the cell. I do not want to use the existing table/grid tools, it is a very simple table for using a tool. Is there something I am doing wrong or is there a better way to get the class of a cell based on its values?

Maybe is there something wrong with the scope of method being called.

Please suggest.


Solution

  • Pass the getCellColor method to the directive like this:

    <count-table table-type='tableType' 
    get-cell-color='getCellColor(col)'>
    </count-table>
    

    The directive looks like this:

    app.directive('countTable', function(){
      return {
        restrict: 'E',
        scope: {
          tableType:'=tableType',
          getCellColor: '&'
        },
        templateUrl: 'table.html'
      };
    });
    

    The directive template looks like this:

     <table>
       <tr ng-repeat="row in tableType.data.rows">
          <td ng-repeat="col in row track by $index" ng-class="getCellColor({col: col})">{{col}}</td>
       </tr>
     </table>
    

    Plunker