个人中心
gpt4 book ai didi

How to resolve Error: [$compile:multidir] Multiple directives in AngularJS(如何解决错误：[$COMPILE：MULTILDIR]AngularJS中的多个指令)

转载 作者：bug小助手 更新时间：2023-10-25 12:25:48 33 4
gpt4 key购买 nike



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

我在AngularJS中面临这个问题，错误是：


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:

以下是我的index.html文件代码：


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

以下是我的itemsloaderindator.template.html文件代码：


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

Here is my app.js file code:

下面是我的app.js文件代码：


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

使用错误多指令错误上面的代码显示我使用的是AngularJS v1.5.7。


更多回答
优秀答案推荐
更多回答

33 4 0
文章推荐： Django ModelForm: Insert blank choice into many form fields(Django ModelForm：在多个表单域中插入空白选项)
文章推荐： os.scandir throws mysterious NotADirectory error(Os.scandir抛出神秘的NotA目录错误)
文章推荐： How to select only 1 item per section using diffable datasource(如何使用不同的数据源在每个部分中只选择1个项目)
文章推荐： Image captured from OpenCV pi camera is full black(从OpenCV圆周率相机捕获的图像是全黑的)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com