How to resolve error: [$compile:multidir] multiple directives in angularjs

Question

1.00/5 (1 vote)

See more:

I'm facing this issue in AngularJS. The error is:

JavaScript

angular.min.js:13708 Error: [$compile:multidir] Multiple directives [foundItems (module: NarrowItDownApp), foundItems (module: NarrowItDownApp)] asking for template on: <found-items found-items="narrowCtrl.foundItems" on-remove="narrowCtrl.removeItem(index)">
http://errors.angularjs.org/1.5.7/$compile/multidir?p0=foundItems&p1=%20(module%3A%20NarrowItDownApp)&p2=foundItems&p3=%20(module%3A%20NarrowItDownApp)&p4=template&p5=%3Cfound-items%20found-items%3D%22narrowCtrl.foundItems%22%20on-remove%3D%22narrowCtrl.removeItem(index)%22%3E
    at angular.min.js:68:12
    at assertNoDuplicate (angular.min.js:9596:15)
    at applyDirectivesToNode (angular.min.js:9013:11)
    at angular.min.js:9516:37
    at processQueue (angular.min.js:16170:28)
    at angular.min.js:16186:27
    at Scope.$eval (angular.min.js:17444:28)
    at Scope.$digest (angular.min.js:17257:31)
    at Scope.$apply (angular.min.js:17552:24)
    at done (angular.min.js:11697:47)
(anonymous) @ angular.min.js:13708
(anonymous) @ angular.min.js:10347
processQueue @ angular.min.js:16178
(anonymous) @ angular.min.js:16186
$eval @ angular.min.js:17444
$digest @ angular.min.js:17257
$apply @ angular.min.js:17552
done @ angular.min.js:11697
completeRequest @ angular.min.js:11903
requestLoaded @ angular.min.js:11836
load (async)
(anonymous) @ angular.min.js:11819
sendReq @ angular.min.js:11642
serverRequest @ angular.min.js:11352
processQueue @ angular.min.js:16170
(anonymous) @ angular.min.js:16186
$eval @ angular.min.js:17444
$digest @ angular.min.js:17257
$apply @ angular.min.js:17552
bootstrapApply @ angular.min.js:1754
invoke @ angular.min.js:4709
doBootstrap @ angular.min.js:1752
bootstrap @ angular.min.js:1772
angularInit @ angular.min.js:1657
(anonymous) @ angular.min.js:31468
trigger @ angular.min.js:3198
defaultHandlerWrapper @ angular.min.js:3488
eventHandler @ angular.min.js:3476

Here is my Index.html file code:

HTML

  1  <!doctype html>
  2  <html lang="en" ng-app="NarrowItDownApp">
  3  
  4  <head>
  5      <title>Narrow Down Your Menu Choice</title>
  6      <meta name="viewport" content="width=device-width, 
  7          initial-scale=1">
  8      <link rel="stylesheet" href="styles/bootstrap.min.css">
  9      <link rel="stylesheet" href="styles/styles.css">
 10      <script src="js/angular.min.js"></script>
 11      <script src="js/app.js"></script>
 12  </head>
 13  
 14  <body>
 15    <div class="container" 
 16        ng-controller="NarrowItDownController as narrowCtrl">
 17          <h1>Narrow Down Your Chinese Menu Choice</h1>
 18  
 19          <div class="form-group">
 20              <input type="text" placeholder="search term" 
 21                  class="form-control" ng-model="searchTerm">
 22          </div>
 23          <div class="form-group narrow-button">
 24              <button class="btn btn-primary" 
 25              ng-click="narrowDown()">Narrow It Down For Me!
 26          </button>
 27          </div>
 28  
 29          <found-items found-items="narrowCtrl.foundItems" 
 30          on-remove="narrowCtrl.removeItem(index)"></found-items>
 31      </div>
 32  </body>
 33  </html>

Here is my itemsloaderindicator.template.html file code:

HTML

  1  <div class="loader">Loading...</div>

What I have tried:

Here is my app.js file code:

JavaScript

  1  (function () {
  2    'use strict';
  3  
  4    angular.module('NarrowItDownApp', [])
  5    .controller('NarrowItDownController', NarrowItDownController)
  6    .service('MenuSearchService', MenuSearchService)
  7    .directive('foundItems', FoundItemsDirective);
  8  
  9    NarrowItDownController.$inject = ['MenuSearchService'];
 10    function NarrowItDownController(MenuSearchService) {
 11        var narrowCtrl = this;
 12        narrowCtrl.foundItems = [];
 13  
 14        narrowCtrl.narrowDown = function () {
 15            if (narrowCtrl.searchTerm) {
 16                MenuSearchService.getMatchedMenuItems(narrowCtrl.searchTerm)
 17                .then(function (foundItems) {
 18                    narrowCtrl.foundItems = foundItems;
 19                });
 20            } else {
 21                narrowCtrl.foundItems = [];
 22            }
 23        };
 24  
 25        narrowCtrl.removeItem = function (index) {
 26            narrowCtrl.foundItems.splice(index, 1);
 27        };
 28    }
 29  
 30    MenuSearchService.$inject = ['$http'];
 31    function MenuSearchService($http) {
 32        var service = this;
 33  
 34        service.getMatchedMenuItems = function (searchTerm) {
 35            return $http({
 36                method: 'GET',
 37                url: 'https://coursera-jhu-default-rtdb.firebaseio.com/menu_items.json'
 38            }).then(function (response) {
 39                var foundItems = response.data.menu_items.filter
 40                (function (item) {
 41                    return item.description.toLowerCase().includes
 42                                            (searchTerm.toLowerCase());
 43                });
 44                return foundItems;
 45            });
 46        };
 47    }
 48  
 49    function FoundItemsDirective() {
 50        var ddo = {
 51            templateUrl: 'loader/itemsloaderindicator.template.html',
 52            scope: {
 53                foundItems: '<',
 54                onRemove: '&'
 55            }
 56        };
 57  
 58        return ddo;
 59    }
 60  })();

Using the code above, the error of Multidirective error shows I'm using the AngularJS v1.5.7.

Posted 10-Sep-23 17:43pm

Url Linker

Updated 12-Sep-23 11:42am

Deeksha Shenoy

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2023-09-10T22:16:00

Solution 1

Follow the link in the error message, read the detailed description of why the error occurs, and follow the instructions to resolve it.

AngularJS: Error Reference: multidir[^]
This error occurs when multiple directives are applied to the same DOM element, and processing them would result in a collision or an unsupported configuration.

To resolve this issue remove one of the directives which is causing the collision.

Posted 10-Sep-23 22:16pm

Richard Deeming

Comments

Url Linker 12-Sep-23 2:43am

Thanks for your considerations Please review my code and give me the line on which i have used multiple directives

Richard Deeming 12-Sep-23 4:18am

Try reading the error message:

Multiple directives [foundItems (module: NarrowItDownApp), foundItems (module: NarrowItDownApp)] asking for template on: <found-items found-items="narrowCtrl.foundItems" on-remove="narrowCtrl.removeItem(index)">

This SO thread[^] suggests that the isolated scope in the FoundItemsDirective is a likely culprit.

Dan Wahlin - Creating Custom AngularJS Directives Part 2 – Isolate Scope[^]