CODEWITHSUNDEEP
phphtmlangularjsruntime-errorangular-ui-bootstrap
Gonzalo Pincheira Arancibia
Gonzalo Pincheira Arancibia

Reputation: 3623

Error Multiple directives [bar, bar] asking for template on when used custom directive and angular-bootstrap

I was trying to create a custom directive, and inside the template of my directive, I have included a directive of angular-bootrstrap library. In this case a popover directive. When I run my app, the following error appears:

Error: [$compile:multidir] Multiple directives [bar, bar] asking for template on: 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="">`

What's wrong in my code?

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);

})();

The template of my directive: 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>

Upvotes: 4

Views: 769

Answers (1)

icfantv
icfantv

Reputation: 4643

My first thought is that you are using two directives on the same element and both specify a template or templateurl property.

That said, looking at your code, we're not getting the full picture because your error is telling you about progressbar but that directive isn't used in any of the code you've pasted.

In the future, a working plunker that shows the error is much more helpful in determining where errors lie.

Upvotes: 0

Related Questions