角度材料设计 ui 路由器不工作 [英] angular material design ui router not working
问题描述
我正在使用水平 md-tab 实现有角度的材料设计，没有任何错误，但选项卡的内容仍然是空白的.提前致谢.
index.html
<头><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="stylesheet" href="angular-material/angular-material.css"><风格>.mainApp md-content .ext-content {填充:50px；边距:20px；背景颜色:#FFF2E0；}</风格><body ng-app="mainApp"><div ng-controller="AppCtrl" layout="column" ng-cloak><div id="logo" ><script type="text/ng-template" id="views/home.html" ></script><script type="text/ng-template" id="views/aboutus.html"></script><script type="text/ng-template" id="views/services.html"></script><script type="text/ng-template" id="views/contactus.html"></script><md-tabs md-stretch-tabs="always" class="md-primary" md-selected="selectedIndex"><md-tab data-ui-sref="home" md-active="state.is('home') "><md-tab-label>首页</md-tab-label></md-tab><md-tab data-ui-sref="aboutus" md-active="state.is('aboutus')"><md-tab-label>关于我们</md-tab-label></md-tab><md-tab data-ui-sref="services" md-active="state.is('services')"><md-tab-label>服务</md-tab-label></md-tab><md-tab data-ui-sref="contactus" md-active="state.is('contactus')"><md-tab-label>联系我们</md-tab-label></md-tab><!-- <md-tab id="tab1" label="HOME" aria-controls="tab1-content" md-nav-click="goto('home')"></md-标签><md-tab id="tab2" label="关于我们" aria-controls="tab2-content" md-nav-click="goto('aboutus)"></md-tab><md-tab id="tab3" label="SERVICES" aria-controls="tab3-content" md-nav-click="goto('services')"></md-tab><md-tab id="tab4" label="联系我们" aria-controls="tab4-content" md-nav-click="goto('contactus')"></md-tab>--></md-tabs><div id="content" ui-view flex><script src="angular/angular.js"></script><script src="angular-material/angular-material.js"></script><script src="angular-aria/angular-aria.js"></script><script src="angular-animate/angular-animate.js"></script><script src="angular/angular-ui-router.min.js"></script><script src="controller/controller.js"></script></html>控制器.js(功能(角度，未定义){严格使用"；angular.module('mainApp', ['ngMaterial', "ui.router"]).config(function($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise('/home');$stateProvider.state('家', {网址:/家"，templateUrl: "views/home.html"}).state('关于我们', {网址:/关于我们"，templateUrl: "views/aboutus.html"}).state('服务', {网址:/服务"，templateUrl: "views/services.html"}).state('联系方式', {网址:/联系方式"，templateUrl: "views/contactus.html"});}).controller('AppCtrl', function($scope,$state, $location, $log) {$scope.selectedIndex = 0;$scope.$watch('selectedIndex', function(current, old) {开关(当前){案例0:$location.url("/home");休息;情况1:$location.url("/aboutus");休息;案例2:$location.url("/services");休息;案例3:$location.url("/contactus");休息;}});});})(角度);
aboutus.html
<h1>超级骗子很棒的联系表将放在此处！</h1>contact 和 services.html 的相同代码
我创建了相同的应用程序，可能您遗漏了一些与 angular-material 匹配的引用，
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-aria.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script><script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>这是工作应用
i am implementing angular material design with horizontal md-tab there are no any errors but still content of tabs are blank.thank you in advance.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="angular-material/angular-material.css">
<style >
.mainApp md-content .ext-content {
padding: 50px;
margin: 20px;
background-color: #FFF2E0; }
</style>
</head>
<body ng-app="mainApp">
<div ng-controller="AppCtrl" layout="column" ng-cloak>
<div id="logo" >
<script type="text/ng-template" id="views/home.html" ></script>
<script type="text/ng-template" id="views/aboutus.html"></script>
<script type="text/ng-template" id="views/services.html"></script>
<script type="text/ng-template" id="views/contactus.html"></script>
<md-tabs md-stretch-tabs="always" class="md-primary" md-selected="selectedIndex">
<md-tab data-ui-sref="home" md-active="state.is('home') ">
<md-tab-label>HOME</md-tab-label>
</md-tab>
<md-tab data-ui-sref="aboutus" md-active="state.is('aboutus')">
<md-tab-label>ABOUT US</md-tab-label>
</md-tab>
<md-tab data-ui-sref="services" md-active="state.is('services')">
<md-tab-label>SERVICES</md-tab-label>
</md-tab>
<md-tab data-ui-sref="contactus" md-active="state.is('contactus')">
<md-tab-label>CONTACT US</md-tab-label>
</md-tab>
<!-- <md-tab id="tab1" label="HOME" aria-controls="tab1-content" md-nav-click="goto('home')"></md-tab>
<md-tab id="tab2" label="ABOUT US" aria-controls="tab2-content" md-nav-click="goto('aboutus)"></md-tab>
<md-tab id="tab3" label="SERVICES" aria-controls="tab3-content" md-nav-click="goto('services')"></md-tab>
<md-tab id="tab4" label="CONTACT US" aria-controls="tab4-content" md-nav-click="goto('contactus')"></md-tab>
--> </md-tabs>
<div id="content" ui-view flex> </div>
</div>
<script src="angular/angular.js"></script>
<script src="angular-material/angular-material.js"></script>
<script src="angular-aria/angular-aria.js"></script>
<script src="angular-animate/angular-animate.js"></script>
<script src="angular/angular-ui-router.min.js"></script>
<script src="controller/controller.js"></script>
</body>
</html>
controller.js
(function(angular, undefined) {
"use strict";
angular.module('mainApp', ['ngMaterial', "ui.router"])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: "/home",
templateUrl: "views/home.html"
})
.state('aboutus', {
url: "/aboutus",
templateUrl: "views/aboutus.html"
})
.state('services', {
url: "/services",
templateUrl: "views/services.html"
})
.state('contactus', {
url: "/contactus",
templateUrl: "views/contactus.html"
})
;
})
.controller('AppCtrl', function($scope,$state, $location, $log) {
$scope.selectedIndex = 0;
$scope.$watch('selectedIndex', function(current, old) {
switch (current) {
case 0:
$location.url("/home");
break;
case 1:
$location.url("/aboutus");
break;
case 2:
$location.url("/services");
break;
case 3:
$location.url("/contactus");
break;
}
});
});
})(angular);
aboutus.html
<div flex layout="row">
<h1>The super duper awesome Contact Form will go here!</h1>
</div>
same code for contact and services.html
I created the same application, probably you are missing some references that matches angular-material,
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script>
<script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>
Here is the Working App
这篇关于角度材料设计 ui 路由器不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
