Question

我正在尝试检测用户点击手风琴时是否点击了我的手风琴。

我发现这篇文章：Handle open/collapse events of Accordion in Angular，但我的标记就像：

<accordion id='accordion' close-others="false">
    <accordion-group is-open="false">
        <accordion-heading>
            title
        </accordion-heading>
        <div>
            <div>
                Cat ipsum dolor sit amet, find something else more interesting all of a sudden go crazy, 
            </div>
        </div>
    </accordion-group>
    <accordion-group is-open="false">
        <accordion-heading>
            title 2
        </accordion-heading>
        <div>
            <div>
               second contents.
            </div>
        </div>
    </accordion-group>
</accordion>

我的控制器：

.controller('Ctrl', ['$scope', function ($scope) {
    //I want to detect if the user click the accordion based on the is-open attribute.
    console.log($scope.is-open) //it doesn't return anything..
}]);

我该怎么做？

Answer 1

当您将对象绑定到accordion-group上的 is-open 属性时，您需要使用$parent，因为accordion指令会创建它自己的子范围，所以当从外部绑定对象时accordieon指令使用$parent。

示例：

<div ng-controller="AccordionDemoCtrl">
 <accordion id='accordion' close-others="false">
             <accordion-group is-open="$parent.isopen">
                 <accordion-heading>
                    title
                 </accordion-heading>
                <div>
                    <div>
                        Cat ipsum dolor sit amet, find something else more interesting all of a sudden go crazy, 
                    </div>
                </div>
            </accordion-group>
</accordion>
</div>

JS：

function AccordionDemoCtrl($scope) {
  $scope.$watch("isopen", function(isOpen){
      if (isOpen) {
        console.log("Opened");
      }
  });
}

实例：http://plnkr.co/edit/2aElCT?p=preview

<强>更新

动态手风琴组的实例（例如pkozlowski.opensource）：http://plnkr.co/edit/OYD7vz?p=preview

Answer 2

您不能在对象（点）表示法中使用减号，因为它被视为($scope.is) - (open)，请尝试使用$scope['is-open']。或者理想情况下，避免它并使用camelCase。

如何检测div（手风琴）是否被点击？

2 个答案: