AngularJS - 处理错误错误：[ng：areq]在这种特殊情况下（？）

时间：2014-12-23 05:39:15

标签： javascript angularjs

人

我试图设置一个带有角度指令的手风琴，但是我在控制台中收到了这个错误。

 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>

我刚刚检查了有关同一问题的其他问题，但我发现我做的一切都很正确，可以看到我的错误在这里？

所以，有人能解释我发生了什么吗？

1 个答案:

答案 0 :(得分：0)

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

在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
  }
  ];
});
相关问题
最新问题