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函數以單擊事件（請參閱template）。在這種情況下，使用您自己的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); 

       } 
      }