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.
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/6e64c3c6-f542-44b2-b95a-404e5f88df4cn%40googlegroups.com.
