AngularJs Akkordeon nicht öffnen mit Is-Open-Attribut

Question

Ich stieß auf ein seltsames Problem. Ich hatte meine eigene Direktive geschrieben. Ich versuche,

zu verwenden, ist offen

Attribut angeben, wenn Akkordeon Gruppe $scope.state genannt, basierend auf Modell geöffnet werden muss. Leider ist es die Eigenschaft isOpen ist immer falsch, auch wenn es in checked() Funktion geändert wird.

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); 

       } 
      }   
     } 
    }; 

});

Ich wäre dankbar für jede Hilfe. Ich habe keine Ahnung, was nicht funktioniert.

Answer 1

Basierend auf Ihrem bereitgestellten Code, habe ich eine plunker erstellt, um Ihr Problem zu reproduzieren, und es zeigt das Problem.

Tatsache ist, dass die accordion-group Direktive automatisch eine toggleOpen Funktion an ein Klickereignis bindet (siehe template). In diesem Fall wird mit Ihrer eigenen checked-Funktion Ihr Wert isOpen zweimal geändert, wenn auf Element geklickt wird, und bleibt somit unverändert.

so beseitigen Sie einfach die "check()" oder stoppen Sie die Änderung isOpen Wert darin.

$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); 

       } 
      }