How to resolve Error: [$compile:multidir] Multiple directives in AngularJS

38 views

Skip to first unread message

Curexmy Analyt (Curexmy.com)

unread,

Sep 11, 2023, 1:41:06 AM9/11/23

to Angular and AngularJS discussion

I'm facing this issue in the AngularJS the error is:

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:

<!doctype html>
<html lang="en" ng-app="NarrowItDownApp">

<head>
<title>Narrow Down Your Menu Choice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/styles.css">
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</head>

<body>
<div class="container" ng-controller="NarrowItDownController as narrowCtrl">
<h1>Narrow Down Your Chinese Menu Choice</h1>

<div class="form-group">
<input type="text" placeholder="search term" class="form-control" ng-model="searchTerm">
</div>
<div class="form-group narrow-button">
<button class="btn btn-primary" ng-click="narrowDown()">Narrow It Down For Me!</button>
</div>

<found-items found-items="narrowCtrl.foundItems" on-remove="narrowCtrl.removeItem(index)"></found-items>
</div>
</body>

</html>
Here is my itemsloaderindicator.template.html file code:

<div class="loader">Loading...</div>
Here is my app.js file code:

(function () {
'use strict';

angular.module('NarrowItDownApp', [])
.controller('NarrowItDownController', NarrowItDownController)
.service('MenuSearchService', MenuSearchService)
.directive('foundItems', FoundItemsDirective);

NarrowItDownController.$inject = ['MenuSearchService'];
function NarrowItDownController(MenuSearchService) {
var narrowCtrl = this;
narrowCtrl.foundItems = [];

narrowCtrl.narrowDown = function () {
if (narrowCtrl.searchTerm) {
MenuSearchService.getMatchedMenuItems(narrowCtrl.searchTerm)
.then(function (foundItems) {
narrowCtrl.foundItems = foundItems;
});
} else {
narrowCtrl.foundItems = [];
}
};

narrowCtrl.removeItem = function (index) {
narrowCtrl.foundItems.splice(index, 1);
};
}

MenuSearchService.$inject = ['$http'];
function MenuSearchService($http) {
var service = this;

service.getMatchedMenuItems = function (searchTerm) {
return $http({
method: 'GET',
url: 'https://coursera-jhu-default-rtdb.firebaseio.com/menu_items.json'
}).then(function (response) {
var foundItems = response.data.menu_items.filter(function (item) {
return item.description.toLowerCase().includes(searchTerm.toLowerCase());
});
return foundItems;
});
};
}

function FoundItemsDirective() {
var ddo = {
templateUrl: 'loader/itemsloaderindicator.template.html',
scope: {
foundItems: '<',
onRemove: '&'
}
};

return ddo;
}
})();
Using the code above the error of Multidirective error shows I'm using the AngularJS v1.5.7.

Reply all

Reply to author

Forward

0 new messages