Question

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

错误：[$ compile：multidir]多个指令[bar，bar]要求输入模板：navbar-default progress-bar＆＃34; ng-class =＆＃34; type＆amp;＆amp; ＆＃39;进度条 - ＆＃39; +类型＆＃34; role =＆＃34;导航>progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="{{max}}" ng-style="{width:＆gt;百分比+＆＃39;％＆＃39;}＆＃34; aria-valuetext =＆＃34; {{percent |数量：0}}％＆＃34; NG-transclude =＆＃34;＆＃34;条=＆＃34;＆＃34;＆GT;`

我的代码有什么问题？

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>

Answer 1

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

也就是说，查看您的代码，我们无法全面了解您的错误，因为您的错误告诉了您progressbar，但该指令并未用于您的任何代码中已经粘贴了。

将来，一个显示错误的工作人员更有助于确定错误所在。

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

1 个答案: