angular ng-class does not react on click

Question

I am trying to use ng-class and bind 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?

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