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

Posted 2023-05-09

【中文标题】如何使用 Jquery 更改 Angular-UI 元素属性

【英文标题】：How to change Angular-UI element property with Jquery

【发布时间】：2016-06-25 18:04:24

【问题描述】：

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

我正在尝试使用 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 的解决方案，但这不是必需的。我只是想让它工作。

【问题讨论】：

is-open 是一个attribute and not a property。

@Stryner 使用attr 也不起作用。你建议我用什么？

检查元素时，it works for me.

@Stryner 我看到它更新了 is-open 属性，但它没有打开或关闭任何手风琴。我想这个问题的答案超出了这个问题的范围。

【参考方案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;
    )
;

【讨论】：

这与我的问题的答案一样正确，因为is-open 属性只能接受角度对象，而不是字符串文字。

@LCIII yupe.. 内部accordion 指令有isOpen 变量...它随时切换到show 和hide（这个切换过程可以从双方发生, 因为手风琴与isOpen: '=') 绑定