AngularJs 手风琴不使用 is-open 属性打开

Question

我遇到了一个奇怪的问题。我写了我自己的指令。我正在尝试使用

开放

根据名为$scope.state 的模型指定何时需要打开手风琴组的属性。不幸的是，它的属性 isOpen 始终为 false，即使它在 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);  

                }
            }