angular ng-class does not work?

Question

angular ng-class does not work?

Hi guys I am trying to use ng-class and bing a class to an expression so that I can unit test the expression binding.But, It seems that I am missing something.

The button:

<li><a class=""  ng-click="onAddInterface()"><i class="icon-plus-sign"></i> add interface </a></li>

The panel that should collapse and expand .

<div class="collapse" ng-class="{in:showCreateNewInterfacePanel}"><div>

the function that is fired

$scope.onAddInterface=function(){
  $scope.showCreateNewInterfacePanel=true;
}

anyway clicking the link nothing happens !

am i missing something ?

javascript
angularjs
ng-class

Answer 1

I'm not sure if this is how you are really defining your $scope.onAddInterface function or if it is just an example... Nevertheless you should be doing it like this:

$scope.onAddInterface = function() {
  $scope.showCreateNewInterfacePanel = true;
}

update

Also make sure the link and the collapsible element are under the same $scope/Controller:

<div ng-controller="Ctrl">
  ...
  <a ng-click="onAddInterface()">add interface</a>
  ...
  <div class="collapse" ng-class="{in:showCreateNewInterfacePanel}"><div>
  ...
</div>

Controller:

function Ctrl($scope) {
  $scope.onAddInterface = function() {
    $scope.showCreateNewInterfacePanel = true;
  }
}

Answer 2

I had a very similar problem and was able to solve this problem by placing 'in' in quotes. It is a string, and not a variable.

  ...
  <div class="collapse" ng-class="{'in':showCreateNewInterfacePanel}"><div>
  ...

Answer 3

Not exactly close to this problem but here is a workaround I've used in detriment of ng-class: http://stackoverflow.com/a/27102394/1254597