AngularJS - 處理錯誤錯誤：[ng：areq]在這個特殊情況下（？）

Question

guys。

我一直試圖建立對角一個指令手風琴，但我在控制檯收到此錯誤。

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> 

我只是檢查就同一問題的其他問題，但我知道我做的一切都是正確的，可以看到我的錯誤在這裏？

因此，有人可以解釋我是怎麼回事？

Answer 1

是的，其實我只是通過設置適當的控制器和相關處理此錯誤。

在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 
    } 
    ]; 
});