2013-01-11 2 views
4

안녕 얘들 아 나는 클래스 바인딩을 사용하여 표현식에 바인딩 할 수 있도록 표현식 binding.But을 테스트 할 수 있는데, 뭔가 빠져있는 것 같습니다.angular 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; 
} 

을 발사된다!

내가 누락 된 항목이 있습니까? 당신이 정말로 당신의 $scope.onAddInterface 함수를 정의하는 방법이 경우

+0

코드를 모두 보지 않고 누락 된 부분을 알 수 있습니까? –

답변

4

는 잘 모르겠어요 또는 그냥 예입니다 경우 ... 그럼에도 불구하고 당신은 이런 식으로 일을해야합니다

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

업데이 트를

또한

링크 및 접을 수있는 요소가 동일한 $ 범위/컨트롤러 아래에 있는지 확인하십시오

<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; 
    } 
}​ 
+0

답장을 보내 주셔서 감사합니다. 그러나 이것은 문제가 아닙니다. – Adelin

+0

@ bmleite의 변경 사항 만있는 [fiddle] (http://jsfiddle.net/mrajcok/H2Qcn/). 이 바이올린은 클릭 할 때 "in"클래스가 적용되고 있음을 보여줍니다. 그래도 문제가 해결되지 않으면 CSS에 문제가있을 수 있습니다 (각도가 아님). –

+0

답장을 보내 주셔서 감사합니다. 그러나 여전히 작동하지 않습니다. 더 간단한 사용자 정의 CSS로 시도했지만 여전히 작동하지 않습니다 !!!!!!!! – Adelin

3

필자는 매우 비슷한 문제가있어서 'in'을 따옴표로 묶어서이 문제를 해결할 수있었습니다. 변수가 아니라 문자열입니다.

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