BootStrap Angular Dynamic Accordion不起作用

Question

＆＃13;

＆＃13;

var myApp = angular.module('customDirectives', []);
    myApp.directive('customCollapse', function () {
        return {
            require: '?ngModel',
            scope: {
                ngModel: '='
            },
            restrict: 'A',
            template: '<div class="panel-group" id="{{panelId}}">\
                       <div class="panel panel-default" ng-repeat-start="item in ngModel">\
                           <div class="panel-heading">\
                               <h4 class="panel-title">\
                                        <a ng-click="toggleCollapsedStates($index)" href="#{{panelBaseId}}-{{$index}}">{{item.title}}</a>\
                               </h4>\
                           </div>\
                                        <div id="{{panelBaseId}}-{{$index}}" data-parent="#{{panelId}}" class="panel-collapse collapse">\
                               <div class="panel-body">{{item.content}}</div>\
                           </div>\
                       </div>\
                       <div ng-repeat-end></div>\
                   </div>',
            link: function (scope, el, attrs) {
                scope.panelBaseId = attrs.collapsePanelBodyId;
                scope.panelId = attrs.collapsePanelId;

                $(document).ready(function () {
                    angular.forEach(scope.ngModel, function (value, key) {
                        if (value.collapsed) {
                            $("#" + scope.panelBaseId + "-" + key).collapse('show');
                        }
                    });
                });

                scope.toggleCollapsedStates = function (ind) {
                    angular.forEach(scope.ngModel, function (value, key) {
                        if (key == ind) {
                            scope.ngModel[key].collapsed = !scope.ngModel[key].collapsed;
                            $("#" + scope.panelBaseId + "-" + ind).collapse('toggle');
                        }
                        else
                            scope.ngModel[key].collapsed = false;
                    });
                }
            }
        };
    });

    myApp.controller('CustomDirectivesController', ['$scope', function ($scope) {
        $scope.collapseData = [
        {
            title: "Collapse Group Item Title 1",
            content: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.",
            collapsed: true
        },
        {
            title: "Collapse Group Item Title 2",
            content: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.",
            collapsed: false
        },
        {
            title: "Collapse Group Item Title 2",
            content: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.",
            collapsed: false
        }
    ];
    }]);

＆＃13;

<link href="../../Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="../../Scripts/angular.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.min.js" type="text/javascript"></script>

<div ng-app="customDirectives">
    <div ng-controller="CustomDirectivesController">       
        <div custom-collapse ng-model="collapseData" collapse-panel-id="collapse-panel" collapse-panel-body-id="collapse-panel-body"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我是Angular JS的新手。我想要一个嵌套的手风琴控制器，它是动态生成的。但是，我正在尝试一个示例代码。它是抛弃功能不是对象或属性....未定义。 $（＆＃34;＃＆＃34; + scope.panelBaseId +＆＃34; - ＆＃34; + key）.collapse（＆＃39; show＆＃39;）;

以上行是投掷错误。在document.ready中。我错过任何参考???谢谢。