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.

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

use getCellColor(col) instead of getCellColor({{col}})

ng-class use $scope.$eval() to evaluate an expression. you don't need to use a pair of brackets

Update: Although you can use getCellColor(col) method to change class. It can just be evaluated once. It's suggested to set a property to each col.

来源：https://stackoverflow.com/questions/24152770/angularjs-scope-method-not-being-called-by-ng-class

标签

javascript

angularjs

ng-class