I'm facing this issue in 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:
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:
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:
1 <div class="loader">Loading...</div>
What I have tried:
Here is my
app.js file code:
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.