угловой ng-класс не работает?

Привет, ребята, я пытаюсь использовать ng-class и bing A class для выражения, чтобы я мог юнит-тестировать привязку выражения.Но, похоже, мне чего-то не хватает.

Кнопка: 

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

Панель, которая должна свернуться и расшириться .

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

Функция, которая запускается 

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

В любом случае при нажатии на ссылку ничего не происходит !

Я что-то упустил ?

2 4
javascript angularjs ng-class

2 ответа:

Я не уверен, действительно ли вы так определяете свою функцию $scope.onAddInterface или это просто пример... Тем не менее, вы должны делать это так: 

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

Обновить

Также убедитесь, что ссылка и сворачиваемый элемент находятся под одним и тем же $scope/Controller: 

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

Контроллер: 

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

У меня была очень похожая проблема, и я смог решить эту проблему, поместив " in " в кавычки. Это строка, а не переменная.

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