如何使用 Jquery 更改 Angular-UI 元素属性

Question

我正在尝试制作一个简单的手风琴，顶部有两个按钮：一个按钮可以打开每个面板，一个按钮可以折叠它们。

我正在尝试使用 jQuery 的 prop 方法来更改每个 uib-accordion 元素上的 is-open 属性，但是当我单击任一按钮时都没有任何反应。

<div ng-controller="AccordionController">
    <p>
        <button type="button" class="btn btn-default btn-sm" ng-click="openAll()">Open All</button>
        <button type="button" class="btn btn-default btn-sm" ng-click="collapseAll()">Collapse All</button>
    </p>
    <uib-accordion close-others="false">
        <uib-accordion-group class="accordionGroup" ng-repeat="xmlResult in xmlResults" is-open="false">
            <uib-accordion-heading>
                //heading...
            </uib-accordion-heading>
            //content...
        </uib-accordion-group>
    </uib-accordion>
</div>

这是我的控制器

angular.module("ResultsTreeViewer").controller("AccordionController", function ($scope) {

    $scope.openAll = function () {
        $(".accordionGroup").prop("is-open", true);
    };
    $scope.collapseAll = function () {
        $(".accordionGroup").prop("is-open", false);
    }
});

我喜欢只有 Angular 的解决方案，但这不是必需的。我只是想让它工作。

Answer 1

我会说不要在控制器内部使用 jQuery 和 Angular。

宁可在每个 accordion 记录中包含 isOpen 变量，然后通过调用单个函数 actionAccordion 函数使其成为 true 和 false（以角度方式具有它是有意义的）。

标记

<p>
    <button type="button" class="btn btn-default btn-sm" ng-click="actionAccordion(true)">Open All</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="actionAccordion(false)">Collapse All</button>
</p>
<uib-accordion close-others="false">
    <uib-accordion-group class="accordionGroup" ng-repeat="xmlResult in xmlResults" 
      is-open="xmlResult.isOpen">
        <uib-accordion-heading>
            //heading...
        </uib-accordion-heading>
        //content...
    </uib-accordion-group>
</uib-accordion>

代码

$scope.actionAccordion = function (flag) {
    angular.forEach($scope.xmlResults, function(xmlResult){
        xmlResults.isOpen = flag;
    })
};