javascript - 角度 ng-class 对点击没有反应

Question

我正在尝试使用 ng-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;
}

无论如何点击链接没有任何反应。

我错过了什么吗？

Answer 1

我不确定这是否是您真正定义$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;
  }
}​

Answer 2

我有一个非常相似的问题，并且能够通过将“in”放在引号中来解决这个问题。它是一个字符串，而不是一个变量。

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