错误当使用自定义指令和角度引导时，多个指令[bar，bar]要求上的模板 - Error Multiple directives [bar, bar] asking for template on when used custom directive and angular-bootstrap

我试图创建一个自定义指令，在指令的模板中，我包含了一个angular bootrstrap库的指令。在这种情况下是popover指令。当我运行我的应用程序时，会出现以下错误：

错误：[$compile:multer]多个指令[bar，bar]在以下位置请求模板：navbar默认进度条"ng class="type&amp；'进度条-'+type"role="navigation >progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="{{max}}" ng-style="{width:>百分比+'%'｝"aria valuetext="｛｛percent|number:0｝｝%"ng transclude="bar=">`

我的代码出了什么问题

app.js

(function () {
'use strict';
  //var angular = require('angular');
  function config($routeProvider) {
    $routeProvider
    .when('/', {
      templateUrl: 'views/init.html',
      controller: 'MainCtrl',
      controllerAs: 'main',
      resolve: {
        jobsData: function(ServiceMain) {
          return ServiceMain.getData();
        },
        itemsData: function(ServiceMain,$resource) {
          return ServiceMain.getItems();
        },
      }
    });    
  }
  angular.module('testApp', ['ngRoute','app.controller','ui.bootstrap'])
    .config(config);
})();

home.php

    <!DOCTYPE html>
    <html lang="en" ng-app="testApp">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <!-- inject:css -->
      <link rel="stylesheet" href="css/style.css">
      <!-- endinject -->
      <!-- bower:css -->  
      <link rel="stylesheet" href="bower_components/animate.css/animate.css">  
      <link rel="stylesheet" href="bower_components/ng-sortable/dist/ng-sortable.min.css">  
      <link rel="stylesheet" href="bower_components/angular-hotkeys/build/hotkeys.min.css">  
      <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">  
      <!-- endinject -->
    </head>
    <body>
      HERE I USED MY CUSTOM DIRECTIVE 
      <nav bar class="navbar navbar-default" role="navigation"></nav>
      <!-- Here we'll to load the templates of the App -->
      <div ng-view></div>
      <!-- bower:js -->  
      <script src="bower_components/angular/angular.js"></script>  
      <script src="bower_components/angular-route/angular-route.js"></script>  
      <script src="bower_components/jquery/dist/jquery.js"></script>  
      <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>  
      <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>  
      <!-- endinject -->
      <!-- inject:js -->
      <script src="components/app.js"></script>
      <script src="components/controllerMain.js"></script>
      <script src="components/directiveUserBar.js"></script>
      <script src="components/serviceMain.js"></script>
      <!-- endinject -->
      <script type="text/javascript">
        var base_url = '<?php echo base_url(); ?>';
      </script>
    </body>
    </html>

directiveUserBar.js

(function () {
'use strict';
  function userBarDirective() {
      return{
        restrict: 'EA',
        templateUrl:'views/user-bar.html',
        link: function (scope, element, attrs) {
          // DOM manipulation/events here!
          scope.showMe = function(){
            alert('showSomething!');
          }
          scope.logOut = function(){
            alert('log out me!');
          }
        },
        controller: function($scope){
          $scope.modules = ['a','b','c','d'];
          $scope.user = "Gonzalo"
        }
      };
  }

  angular
    .module('testApp')
    .directive('bar',userBarDirective);
})();

我的指令模板：user-bar.html

<div class="container-fluid">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#userMenu">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Info Plant</a>
  </div>
  <div class="collapse navbar-collapse" id="userMenu">
    <ul class="nav navbar-nav" ng-repeat="module in modules">
      <li><a ng-click="showMe()">{{module}}</a></li>
    </ul>
    <div class="form-group">
      <a popover-placement="bottom" popover="user" popover-title="Gonzalo"> Log Out</a>
    </div>
  </div>  
</div>

我的第一个想法是在同一个元素上使用两个指令，并且都指定了template或templateurl属性。

也就是说，看看你的代码，我们没有得到完整的画面，因为你的错误告诉你关于progressbar，但你粘贴的任何代码中都没有使用该指令。

在未来，显示错误的工作plunker更有助于确定错误所在。