Geek Answers Handbook

Error Several [bar, bar] directives request a template when using the user directive and angular-bootstrap

I tried to create a custom directive, and inside the template of my directive I included the angular -bootrstrap library directive. In this case, the popover directive. When I launch my application, the following message appears:

Error: [$ compile: multidir] Several directives [bar, bar] with the request for the template: 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 is 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);

})();

: 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>
+4
1

, template templateurl.

, , , progressbar, .

, , .

0

More articles:


All Articles