Dealing with a special case of an error message in AngularJS: [ng:areq] - what could be causing

Hey everyone,

I've been attempting to create an accordion using a directive in Angular, but I keep encountering this error message in the console.

 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)

Here is my complete AngularJS code:

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

Additionally, here is the HTML snippet:

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

I have reviewed similar questions related to this issue, and it seems like everything is set up correctly. Can anyone help me identify where I might be going wrong?

If there is someone who can provide insight into what could be causing this problem, I would greatly appreciate it.

javascriptangularjs

Answer №1

Yes, I managed to resolve this issue by configuring the appropriate controller and dependencies.

Upon inspecting the HTML, everything appears to be in order.

The problem arose from my usage of global functions. To gain a better understanding, please review the updated code snippet below:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to send multiple requests consecutively using the riot-lol-api?

SCENARIO: Recently, I found myself dealing with an existing codebase that relied on a different library for making requests to the Riot API. Due to some issues with the current library, I made the decision to transition to a new one: https://www.npmjs.co ...

javascriptnode.jspromise

jQuery for Revealing or Concealing Combinations of Divs

UPDATE: Check out this answer. I have a complex query related to jQuery/JavaScript. I came across a post dealing with a similar issue here, but my code structure is different as it does not involve raw HTML or anchor tags. Essentially, I am working on ...

javascriptjquery

Issue with Jquery AJAX success function specifically in Firefox browser, while other functions in the script are functioning correctly

I have 4 scripts using ajax, but one of them isn't functioning properly in Firefox. Even the alert in success doesn't trigger anything. There are no error messages, just nothing happening. However, it works perfectly fine in IE and Chrome. Belo ...

javascriptjqueryajaxfirefox

v-show is not functioning properly

After clicking the button, I notice that even though the array shows[] changes (as indicated by Vue's chrome plugin), the character 'a' remains on the page. However, characters 'b' and 'c' do not appear at all. ...

javascriptvue.js

Expanding Node Automatically with Bootstrap 4 on Page Load

I am currently learning Bootstrap 4, JavaScript, and other technologies. One of the things I want to achieve is to automatically expand a node when the page loads for the first time. However, my attempts to modify the data-collapse attribute have been uns ...

javascripthtmlbootstrap-4

Bespoke HTML, CSS, JavaScript, and PHP website designs within the Wordpress platform

I am a beginner in the world of Wordpress, coming from a background of creating websites from scratch. Currently, I am working on a Wordpress template (Astra) and looking to create a custom page using HTML, CSS, JavaScript, and PHP from the ground up to ad ...

javascriptphphtmlcsswordpress

Unable to process form submission with AngularJS + Stormpath

I am facing an issue with form submission. Even though I believe that the login and password data are being sent correctly, nothing happens when I submit the form. I am attempting to submit the form without using ngSubmit because it is not feasible in my s ...

javascripthtmlangularjsflaskstormpath

Error message: The attempted import failed because ' is not exported from the module

I am facing an issue with resolving my problem. In a file named lama.d.ts, I have declared a class using the following code: export declare class lama { // code here } After that, I tried to import this class in another file within the same folder ...

javascriptreactjstypescriptclassreact-typescript

Unraveling the Mistake: Delving into AngularJS

After upgrading AngularJS from version 1.4.9 to the latest version 1.6.7, I have encountered a multitude of errors in the Chrome console, such as: angular.js:14794 Error: [orderBy:notarray] http://errors.angularjs.org/1.6.7/orderBy/notarray?p0=%7B%7D ...

angularjs

What is the process for dynamically including a document in a collection?

I am currently developing an accounting system that allows users to dynamically create accounts in the chart of accounts. Each time a new account is created, the app also generates a new collection for that specific account. Here is an example: const a ...

javascriptmongodbmongoose

"Enhance user experience with AJAX for selecting multiple checkboxes or performing mult

Hey there! So, I've got a question about handling multiple checkboxes with the same name in a form. Here's an example of what I'm working with: <input type="checkbox" name="myname[]" value="1" /> <input type="checkbox" name="myname ...

javascriptajax

submit django form when a checkbox is checked

tml: <div id="report-liveonly"> <form action="." id="status" method="POST">{% csrf_token %} <p>{{SearchKeywordForm.status}}Only display LIVE reports</p> </form> </div> I am facing an issue while trying to submit ...

javascriptdjangodjango-formsdjango-views

How can we increase the accuracy of numerical values in PHP?

When performing a math operation in JavaScript, the result is: 1913397 / 13.054 = 146575.53240386088 However, when the same operation is performed in PHP, the result is slightly different: 1913397 / 13.054 = 146575.53240386 This discrepancy may be due ...

phpjavascriptfloating-pointprecision

Eliminate redundant elements during the process of arranging an array

I have a collection of objects in an array that needs to be sorted and have duplicates removed based on specific values within each object. Currently, I am using two separate loops (not nested) - one for sorting and another for removing duplicates. Is ther ...

javascriptarrayssorting

How come my effort to evade quotation marks in JSON isn't successful?

When trying to parse a JSON-string using the JQuery.parseJSON function, I encountered an error message that read: Uncaught SyntaxError: Unexpected token R. This was unusual as the only uppercase 'R' in my JSON-formatted string appeared right afte ...

javascriptjsonescaping

Guide to activating "Snapping" feature using the "Select" function in Openlayers 3

I have created an application using OpenLayers 3 that allows users to draw lines or points on a map and add tags to them. While the existing functions in OL3 are helpful for drawing and modifying features, I found it challenging to select the items I drew ...

javascriptopenlayers-3

Do You Really Need a Try/Catch Block for a Node.js MySQL Query?

Currently, I am in the process of setting up a new system that involves querying a MySQL database for registering and deleting staff members. One question on my mind is whether it is necessary to enclose the query within a try-catch block or if doing so ...

javascriptmysqlnode.jsdatabasetry-catch

invoke the modal function from a separate React file

I am currently studying react and nextjs. I am experimenting with calling a modal from another file but unfortunately it's not functioning as expected. Here is the code I used: Signin.js import { Modal } from "react-bootstrap"; import { u ...

javascriptreactjsnext.js

What methods are recommended for storing key-value pairs in AngularJS?

I am working on an Angular application with a main page and partial pages. The partial pages are displayed within ui-view. <div class="" ui-view> </div> To store a global variable, I am using $scope.$parent.variable_name. I declared the vari ...

angularjsangularjs-scopeangularjs-service

What techniques does Twitter use to insert labels into text boxes?

When I visited the Twitter login page, I noticed something interesting - the labels for input fields were inside the input fields themselves. It seemed to be accomplished using a common trick involving javascript/jquery. Intrigued, I delved into the Twitte ...

javascriptjqueryhtmlcss