AngularJs 아코디언이 is-open 속성으로 열리지 않음

Question

이상한 문제가 발생했습니다. 나는 내 자신의 지시를 썼다. 내가

를 사용하는 시도하고 있습니다 오픈 아코디언 그룹이 $scope.state라는 이름의 모델을 기반으로 개방해야 할 때 지정하는

속성. 불행하게도 isOpen 속성은 항상 거짓입니다. 심지어 checked() 함수에서 true로 변경 될 때도 마찬가지입니다.

Directive.html

<accordion> 
    <accordion-group class="my-panel-body" ng-class="{'my-panel-heading-checked':state.isOpen,'my-panel-heading-default':!state.isOpen}" is-open="state.isOpen"> 
     <!--Accordion header --> 
     <accordion-heading id="{{groupId}}" > 
      <div ng-click="checked()" > 
       <i class="pull-left glyphicon" ng-class="status"></i> {{title}} 
      </div> 
     </accordion-heading> 

     <!--Accordion content --> 
    </accordion-group> 
</accordion> 

Directive.js

angular.module('locale'). 
    directive('accordionList', function() { 
     return{ 
      restrict: 'A', 
      scope: { 
       title: '=', 
       result: '=', 
       groupId: '=' 
      }, 
      templateUrl: 'html/accordionList.html', 
      controller: function($scope){ 

      var glyphicon = 'glyphicon glyphicon-'; 
      var status = glyphicon + 'unchecked'; 
      $scope.state = { 
       isOpen: false 
      } 
      $scope.status = status; 

      $scope.checked = function(){ 
       console.log($scope.state.isOpen) //It is always false! 
       if ($scope.state.isOpen) { 
        $scope.state.isOpen = false; 
        $scope.status = status; 
       } 
       else { //Always entering this part of code! 
        console.log("FLAG"); 
        $scope.state.isOpen = true; //True only here when invoked. 
        $scope.status = glyphicon + 'check'; 
        console.log($scope.state.isOpen); 

       } 
      }   
     } 
    }; 

});

나는 도움을 주셔서 감사합니다. 나는 잘 작동하지 않는다.

Answer 1

제공된 코드를 기반으로 문제를 재현하기 위해 plunker을 만들었습니다. 문제가 계속 표시됩니다.

사실 accordion-group 지시문은 toggleOpen 함수를 클릭 이벤트 (0-참조)에 자동 바인딩합니다. 이 경우 자신의 checked 기능을 사용하면 요소가 클릭 될 때 isOpen 값이 두 번 변경되므로 변경되지 않습니다.

'check()'를 제거하거나 isOpen 값을 변경하지 마세요.

$scope.checked = function(){ 

       console.log($scope.state.isOpen) //It is always false! 
       if ($scope.state.isOpen) { 
        //$scope.state.isOpen = false; 
        $scope.status = status; 
       } 
       else { //Always entering this part of code! 
        console.log("FLAG"); 
        // $scope.state.isOpen = true; //True only here when invoked. 
        $scope.status = glyphicon + 'check'; 
        console.log($scope.state.isOpen); 

       } 
      }