数据绑定-AngularJs的手风琴未以is open属性打开

Question

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

打开

属性，以指定何时需要基于名为$scope.state的模型打开手风琴组。不幸的是，它的属性isOpen总是false，即使在checked()函数中将其更改为true时也是如此。

指令.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>

指令.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函数以单击事件（请参阅模板）。在这种情况下，使用您自己的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);  
                }
            }