Question

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

是开

属性指定何时需要根据名为$scope.state的模型打开accordion组。不幸的是，它的属性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函数绑定到click事件（请参阅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);  

                }
            }

AngularJs手风琴没有打开is-open属性

1 个答案: