Cho mình hỏi là khi mình muốn tạo tabs bottom, sau khi viết code thì nội dung tabs không hiện thị lên màn hình, cho mình hỏi tại sao với ạ?
index.html
<html ng-app="myApp">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Joy Good</title>
<link rel="stylesheet" href="components/loader.css">
<link rel="shortcut icon" href="img/icon.ico">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" href="css/style_login.css">
<link rel="stylesheet" href="css/style_menu.css">
<link rel="stylesheet" href="css/style_find.css">
<link rel="stylesheet" href="css/style_detail.css">
<script src="components/loader.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/connect.js"></script>
</head>
<body>
<!-- navigation -->
<div ui-view></div>
</body>
</html>
tabbar.html
<div>
<ul>
<li><a href="#/tabbar/Menu" data-icon="custom" name="Menu-tab">home</a></li>
<li><a href="#/tabbar/Master_shohin" data-icon="custom" name="Shohin-tab">Write</a></li>
<li><a href="#tabbar/master_Mitsumori_Shosai" data-icon="custom">Search</a></li>
</ul>
</div>
menu.html
<ons-page id="menu" role="tabpanel" class="tab-pane active" >
<section class="menu haikei-color" class="tabs-content">
<p class="menu_logo">
<img style="height:200px; width:100%;" src="img/anhnen.png">
</p>
<h2>Menu</h2>
<div class="menu_detail">
<button class="menu_button" ui-sref="Estimate">
<img src="img/icon-mitsumorisho1.png"><br>見積書処理
</button>
<button class="menu_button" ui-sref="Shire" >
<img src="img/icon-shiire.png"><br>仕入処理
</button>
<button class="menu_button" ui-sref="Invoice">
<img src="img/icon-receipt.png"><br>請求処理
</button>
<button class="menu_button" ui-sref="Invoice_Detail">
<img src="img/icon-approach.png"><br>アプローチ検索
</button>
<button class="menu_button" ui-sref="Shohin">
<img src="img/icon-product.png"><br>商品一覧
</button>
<button class="menu_button" ui-sref="Clients">
<img src="img/icon-torihikisaki.png"><br>取引先一覧
</button>
<button class="menu_button" ui-sref="Configuration" >
<img src="img/icon-setei.png"><br>設定
</button>
</div>
</section>
</one-page>
app.js
angular.module('myApp',['onsen', 'ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
.state('Tabbar', {
url: '/Tabbar',
abstract: true,
views: {
'':{ controller: 'TabbarController', templateUrl: 'views/tabbar.html'},
},
})
.state('tabbar.Menu',{
url: '/Menu',
views: {
'Menu-tab': {
templateUrl: 'templates/Menu.html'
}
}
})
.state('tabbar.Shohin',{
url: '/Shohin',
views: {
'Shohin-tab': {
templateUrl: 'templates/master_Shohin.html'
}
}
})
.state('tabbar.master_Shohin_Update',{
url: '/master_Shohin_Update',
views: {
'Shohin-tab': {
templateUrl: 'templates/master_Shohin_Update.html'
}
}
})
;
$urlRouterProvider.otherwise("/");
}])