错误多个指令 [bar, bar] 在使用自定义指令和 angular-bootstrap 时要求模板

Posted

技术标签:

【中文标题】错误多个指令 [bar, bar] 在使用自定义指令和 angular-bootstrap 时要求模板【英文标题】：Error Multiple directives [bar, bar] asking for template on when used custom directive and angular-bootstrap 【发布时间】：2014-11-17 19:18:53 【问题描述】：

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

错误：[$compile:multidir] 多个指令 [bar, bar] 要求模板打开：navbar-default progress-bar" ng-class="type && 'progress-bar-' + type" role="navigation >progressbar" aria-valuenow="value" aria-valuemin="0" aria-valuemax="max" ng-style="width: >percent + '%'" 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>

【问题讨论】：

【参考方案1】：

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

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

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

【讨论】：

以上是关于错误多个指令 [bar, bar] 在使用自定义指令和 angular-bootstrap 时要求模板的主要内容，如果未能解决你的问题，请参考以下文章

Python使用matplotlib可视化条形图（bar plot）自定义在条形图的顶部添加数值标签（Bar Chart）

iOS 自定义tab bar 怎么隐藏

uniapp实战笔记使用uni-nav-bar自定义顶部状态栏和导航栏

R语言ggplot2可视化条形图(bar plot)并为条形图添加误差条（error bar）自定义设置误差条（error bar）的颜色/色彩（ Barplots with Error bar）

八度：使用 bar 和 histc

uniapp使用uni-nav-bar自定义顶部状态栏和导航栏