Javascript angular ng-class 不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14280632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular ng-class does not work?
提问by Adelin
Hi guys I am trying to use ng-class and bing a class to an expression so that I can unit test the expression binding.But, It seems that I am missing something.
嗨，伙计们，我正在尝试使用 ng-class 并将类绑定到表达式，以便我可以对表达式绑定进行单元测试。但是，似乎我遗漏了一些东西。
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 ?
我错过了什么吗？
采纳答案by bmleite
I'm not sure if this is how you are really defining your $scope.onAddInterfacefunction or if it is just an example... Nevertheless you should be doing it like this:
我不确定这是否是你真正定义你的$scope.onAddInterface函数的方式，或者它只是一个例子......不过你应该这样做：
$scope.onAddInterface = function() {
$scope.showCreateNewInterfacePanel = true;
}
update
更新
Also make sure the link and the collapsible element are under the same $scope/Controller:
还要确保链接和可折叠元素在同一个 $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;
}
}?
回答by Craig Ulliott
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.
我有一个非常相似的问题，并且能够通过将 'in' 放在引号中来解决这个问题。它是一个字符串，而不是一个变量。
...
<div class="collapse" ng-class="{'in':showCreateNewInterfacePanel}"><div>
...
