Javascript AngularJS-处理错误：[ng:areq]在这种特殊情况下

伙计们

我试图用angular指令设置手风琴，但我在控制台中遇到了这个错误

 Error: [ng:areq] http://errors.angularjs.org/1.3.2/ng/areq?p0=CustomDirectivesController&p1=not%20a%20function%2C%20got%20undefined
    at Error (native)
    at file:///Users/Marcelo/Desktop/Online-Colleges/capi/view/scripts/angular/angular.min.js:6:416
    at Nb (file:///Users/Marcelo/Desktop/Online-Colleges/capi/view/scripts/angular/angular.min.js:19:417)
    at ob (file:///Users/Marcelo/Desktop/Online-Colleges/capi/view/scripts/angular/angular.min.js:20:1)
    at file:///Users/Marcelo/Desktop/Online-Colleges/capi/view/scripts/angular/angular.min.js:75:177
    at file:///Users/Marcelo/Desktop/Online-Colleges/capi/view/scripts/angular/angular.min.js:57:112
    at r (file:///Users/Marcelo/Desktop/Online-Colleges/capi/view/scripts/angular/angular.min.js:7:408)
    at I (file:///Users/Marcelo/Desktop/Online-Colleges/capi/view/scripts/angular/angular.min.js:56:496)
    at g (file:///Users/Marcelo/Desktop/Online-Colleges/capi/view/scripts/angular/angular.min.js:51:299)
    at g (file:///Users/Marcelo/Desktop/Online-Colleges/capi/view/scripts/angular/angular.min.js:51:316)

这是我完整的AngularJS代码

customDirectives = angular.module('customDirectives', []);
  customDirectives.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;
        });
      }
    }
  };
});

angular.module('CustomComponents', ['customDirectives']);
function CustomDirectivesController($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
  }
  ];
}

还有我的html：

<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>

我刚刚检查了关于同一问题的其他问题，但我发现我做的每件事都是正确的，可以看出我的错误是什么吗

---

那么，有人能解释一下发生了什么吗？

是的，实际上我只是通过设置适当的控制器和依赖项来处理这个错误

在html中，一切都很好

问题是我正在声明全局函数。查看新代码，以便理解：

    var customDirectives = angular.module('customDirectives', []);
customDirectives.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;
        });
      }
    }
  };
})

customDirectives.controller('CustomDirectivesController', 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 5",
    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 4",
    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
  }
  ];
});

---

使用angular的开发版本获得更详细的错误输出。您将获得堆栈跟踪。缩小版本提供指向angular.orgCustomDirectivesController上不太详细的erorr输出的链接。控制器是一个全局函数，而不是注册到代码中模块的控制器。作为全局函数的控制器是deprecated@charlietfl很好，但是，我需要做什么呢？角度。模块“CustomComponents”。控制器“CustomDirectivesController”。。。。。。看见