Angular ng class not working?

Question

Hi guys, I'm trying to use the ng-class and bing class for an expression so that I can unit test bind the expression. But it seems like I'm missing something.

Button:

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

A panel that must collapse and expand.

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

function performed

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

anyway, clicking on the link doesn’t happen!

Am I missing something?

Answer 1

I'm not sure if this is really how you really define your $scope.onAddInterface function, or if this is just an example ... However, you should do it this way:

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

Update

Also make sure the link and the item to be dropped 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 I was able to solve this problem by putting the "in" in quotation marks. This is a string, not a variable.

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