Question

我有这个指令JS Fiddle expample，可以选择在当时打开一个面板，我需要修改该行为并向用户提供打开多个面板的选项。

上的代码相同

    directive("btstAccordion", function () {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {},
        template:
            "<div class='accordion' ng-transclude></div>",
        link: function (scope, element, attrs) {

            // give this element a unique id
            var id = element.attr("id");
            if (!id) {
                id = "btst-acc" + scope.$id;
                element.attr("id", id);
            }

            // set data-parent on accordion-toggle elements
            var arr = element.find(".accordion-toggle");
            for (var i = 0; i < arr.length; i++) {
                $(arr[i]).attr("data-parent", "#" + id);
                $(arr[i]).attr("href", "#" + id + "collapse" + i);
            }
            arr = element.find(".accordion-body");
            $(arr[0]).addClass("in"); // expand first pane
            for (var i = 0; i < arr.length; i++) {
                $(arr[i]).attr("id", id + "collapse" + i);
            }
        },
        controller: function () {}
    };
}).
directive('btstPane', function () {
    return {
        require: "^btstAccordion",
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            title: "@",
            category: "=",
            order: "="
        },
        template:
            "<div class='accordion-group' >" +
            "  <div class='accordion-heading'>" +
            "    <a class='accordion-toggle' data-toggle='collapse'> {{category.name}} - </a>" +

            "  </div>" +
            "<div class='accordion-body collapse'>" +
            "  <div class='accordion-inner' ng-transclude></div>" +
            "  </div>" +
            "</div>",
        link: function (scope, element, attrs) {
            scope.$watch("title", function () {
                // NOTE: this requires jQuery (jQLite won't do html)
                var hdr = element.find(".accordion-toggle");
                hdr.html(scope.title);
            });
        }
    };
})

我该怎么办？

Answer 1

您只需要删除data-parent属性（DEMO）：

//...
// set data-parent on accordion-toggle elements
var arr = element.find(".accordion-toggle");
for (var i = 0; i < arr.length; i++) {
    //$(arr[i]).attr("data-parent", "#" + id);          <------- here
    $(arr[i]).attr("href", "#" + id + "collapse" + i);
}
//...

Answer 2

这个问题IMO是不使用角度良好的完美示例。我建议删除整个指令和jQuery，因为它们对于简单的手风琴来说是不必要的（即角度对于这种类型的ui是完美的）。这是一个更新版本：

http://jsfiddle.net/MTKp7/131/

现在我已经将它保留为尽可能详细，以便您可以选择如何抽象它（通过使用与ng-include混合的ng-repeat）。我还保留了库的依赖关系，以便保留样式，但这些也不难获取。

以下是如何创建此功能的基本示例。 div结构和类只留下来匹配jQuery对象。

<div class="accordion" ng-controller="AccordionCtrl">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" ng-click="toggle('a')">test</a>
        </div>
        <div class="accordion-body">
            <div class="accordion-inner" ng-show="show.a">
                <div>Anim pariatur cliche reprehenderit, enim eiusmod high life 
            accusamus terry richardson ad squid. 3 wolf moon officia aute,
            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
            laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
            on it squid single-origin coffee nulla assumenda shoreditch et.
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
            vice lomo. Leggings occaecat craft beer farm-to-table, raw 
            denim aesthetic synth nesciunt you probably haven't heard of 
            them accusamus labore sustainable VHS.</div>
            </div>
        </div>
    </div>
</div>

切换：

$scope.toggle = function(index) {
    $scope.show[index] = !$scope.show[index];
};

Answer 3

此？

http://jsfiddle.net/MTKp7/129/

评论这一行：

//$(arr[i]).attr("data-parent", "#" + id);

AngularJS - 我需要一个手风琴，可以选择让多个面板打开

3 个答案: