4
我試圖創建一個自定義指令，並且在我的指令模板中，我包含了一個指令angular-bootrstrap library 。在這種情況下，popover指令。 當我運行我的應用程序，出現以下錯誤：錯誤使用自定義指令和角度引導時要求模板的多個指令[bar，bar]
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="">`
什麼是錯在我的代碼？
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);
})();
我的指令的模板：用戶一個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>