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?
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;
}
}