1
を使用した後に動作しませんが、今、私はちょっとこだわって。私はメニューバーから始めました。AngularJSドロップダウンはもはやだから、私はAngularJSで遊んだディレクティブ
すべてのメニュー項目をテンプレート+コントローラに読み込むカスタムディレクティブを作成しました。
HTMLインデックス
<!DOCTYPE html>
<html lang="en-us" ng-app="someApp">
<head>
<meta charset="utf-8">
<title>Magazijn</title>
<base href="/">
<!-- Stylesheets -->
</head>
<body>
<main-menu></main-menu>
<div id="page-wrapper" ng-class="globals.currentUser == null ? 'max' : ' '">
<div id="page-inner">
<div class="container">
<div ng-view></div>
</div>
</div>
</div>
<!-- jQuery/Bootstrap/Morris -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.0/metisMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="/assets/js/main.js"></script>
<!-- Angular -->
<script src="https://code.angularjs.org/1.5.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.4/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.4/angular-cookies.min.js"></script>
<script src="/angular/app.js"></script>
<script src="/angular/routes.js"></script>
<!-- Services -->
<script src="/angular/services/auth-service.js"></script>
<script src="/angular/services/api-service.js"></script>
<!-- Directives -->
<script src="/angular/directives/menu-directive.js"></script>
<!-- Controllers -->
<script src="/angular/controllers/trucks-index-controller.js"></script>
<script src="/angular/controllers/trucks-show-controller.js"></script>
<script src="/angular/controllers/trucks-history-controller.js"> </script>
<script src="/angular/controllers/monitor-controller.js"></script>
<script src="/angular/controllers/messages-index-controller.js"> </script>
<script src="/angular/controllers/login-controller.js"></script>
JS
(function() {
'use strict';
angular
.module('app')
.controller('menuCtrl' , ['$scope','$timeout', function($scope, $timeout){
$scope.menu = {
"items" : [{
"name" : "Dashboard",
"url" : "/",
"icon" : "fa fa-dashboard fa-3x"
},
{
"name" : "TV Monitor",
"url" : "/monitor",
"icon" : "fa fa-television fa-3x"
},{
"name" : "Trucks",
"url" : "",
"icon" : "fa fa-truck fa-3x",
"childs": [{
"url" : "/trucks",
"name" : "Overview"
},{
"url" : "/trucks/history",
"name" : "History"
}]
}]
};
}])
.directive('mainMenu' , function(){
return {
restrict: 'E',
controller: 'menuCtrl',
templateUrl : '/templates/partial/nav.html'
}
})})();
HTML
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li ng-repeat="m in menu.items">
<a href="{{m.url}}"><i class={{m.icon}}></i>{{m.name}} <span ng-if="m.childs.length > 1" class="fa arrow fa-2x"></span></a>
<ul class="nav nav-second-level collapse">
<li ng-repeat="c in m.childs">
<a href="{{c.url}}">{{c.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
そして、私は単純にディレクティブを呼び出すのindex.htmlに。
これはすべてドロップダウンを除いて問題なく動作します。私はすべてのコード@インデックスページを残すとうまく動作するmentisを使用していますが、指示文でHTMLをロードすると機能が停止します
このmentisは私が使用したライブラリです。この投稿は役立つはずhttps://docs.angularjs.org/api/ng/service/ $
をコンパイルします：
感謝を！それを見るだろう:) – Jeffrey