个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在深入研究 Angular，并决定使用 Angular Material 库来协助我的第一个应用程序。到目前为止，我已经从 https://material.angularjs.org/1.1.0/demo/navBar 复制了一些非常基本的代码我已经对其进行了修改以满足我自己的需要。我在思考路由和 md-nav-items 时遇到了一些麻烦。
<html>
<head>
<title>PRT - CIT</title>
<meta name="viewport" content="width=device-width, initial-scale=1" </meta>
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> </head>
<body ng-app="MyApp" id="bootstrap-overrides">
<div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage main">
<md-content class="md-padding">
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('queue')" name="queue">Queue</md-nav-item>
<md-nav-item md-nav-click="goto('detail')" name="detail">Detail</md-nav-item>
<md-nav-item md-nav-click="goto('request')" name="request">Request</md-nav-item>
<!-- these require actual routing with ui-router or ng-route, so they won't work in the demo
<md-nav-item md-nav-sref="app.page4" name="page4">Page Four</md-nav-item>
<md-nav-item md-nav-href="#page5" name="page5">Page Five</md-nav-item>
--></md-nav-bar>
<div class="ext-content"> External content for `<span>{{currentNavItem}}</span>` </div>
</md-content>
</div>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-resource/angular-resource.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-messages/angular-messages.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="js/site.js"></script>
<link rel="stylesheet" href="/css/site.css">
</body>
</html>
这是我的 JS:
(function () {
'use strict';
var MyApp = angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngRoute']).controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'queue';
}
MyApp.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/index.html'
, controller: 'AppCtrl'
}).when('/queue', {
templateUrl: '/partials/queue.html'
, controller: 'AppCtrl'
}).when('/detail', {
templateUrl: '/partials/detail.html'
, controller: 'AppCtrl'
}).when('/request', {
templateUrl: '/partials/request.html'
, controller: 'AppCtrl'
});
});
})();
我有点不知道应该如何安排选项卡。根据我的阅读，md-nav-bar 内置了一些路由，但我发现了使用 ngRoute 以及 ui-router 的示例。
我也对在
中实际填充我的部分 View 感到困惑<div class="ext-content"> External content for `<span>{{currentNavItem}}</span>` </div>
我尝试使用 md-nav-href 而不是 md-nav-click 但它最终将我重定向到页面，而不是填充我的选项卡/导航栏下方的内容；我回滚了我写的 JS 和那部分 HTML。我已经阅读了我可以找到的该区域中发布的其他问题，但没有一个解决基于导航栏元素呈现不同部分的问题。有什么建议么？我在想我可以监视 currentNavItem 并根据它的值进行正确的部分渲染，但同样，我不确定如何实际进行渲染。
Here是一个Plnker，由于某种原因在预览中无法正确呈现，但代码与我在本地的代码相同。
Here是它在本地运行的样子的图像。
提前致谢!
最终编辑:
S/O @Searching 帮助我让它在下面工作。我已经更新了 plnker link以反射(reflect)变化。请注意，由于基本附加脚本，它变得有点迟钝。
最佳答案
ngRoute:当$route服务时你会需要ng-view容器。这将用于加载所有路由页面。
您没有 goto()，因此只需使用简单的 md-nav-href 标签即可导航。 currentNavItem 由 md-selected-nav-item 设置，这不是您需要的。让我们根据您的设置进行路由
index.html :将您的链接更新为如下所示。使用 md-nav-href
<md-nav-item md-nav-href="queue" name="queue">Queue</md-nav-item>
index.html :当使用 html5Mode 时，您将需要 base 标签。而不是手动指定它只需使用下面的脚本。确保在此脚本之前加载 angular.js。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
脚本:启用 html5molde，为什么……外面的资源太多了。我鼓励你查找 :)
MyApp.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true)
$routeProvider.when('/', {
templateUrl : 'index.html',
controller : 'AppCtrl'
}).when('/queue', {
templateUrl : 'queue_partial.html',//actual location will vary according to your local folder structure
controller : 'AppCtrl'
}).when('/detail', {
templateUrl : 'detail_partial.html',
controller : 'AppCtrl'
}).when('/request', {
templateUrl : 'request_partial.html',
controller : 'AppCtrl'
});
});
关于javascript - Angular Material 和 md-nav-bar 路由，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40876293/
25
4
0
我想在 md-toolbar 中使用 mf-tabs，我使用 Sithdown 在 https://github.com/angular/material/issues/1076 中提供的解决方案 它
我是新手，我设法用服务提供的数据实现了我的 md-table。现在我正在尝试实现过滤器、排序和分页功能，但我认为我做错了什么。 这是我的组件: import { Component, OnInit,
我必须打开一个 md-dialog，其中包含一个带有两个选项卡的 md-tab-group。 md-dialog 可以从两个按钮打开，这两个按钮应该打开相应的选项卡。打开 md-dialog 的模板:
我正在尝试做这样的事情: {{item}}
我正在尝试使用 md-datepicker 遍历一个月的时间间隔，因此我创建了这个 codepen 示例以便更好地演示: http://codepen.io/anon/pen/ygBGOg 当单击“P
这是关于 Codepen 的例子. 我正在设置 md-row-height="30px" 然后计算 md-rowspan 使其等于元素数 + 1。(头部加一) {{ t
当我频繁切换 md-tabs 时，Md-tabs 切换正确但多个 md-tab-item 元素同时具有“md-active”类，所以我看不到选项卡的内容是事件的，因为它与其右侧选项卡的内容重叠。 据我
我想将操作放在同一数据行上，我有两个操作，为此我使用按钮和图标作为下面的代码。 {{item.codigo}} {{it
在我的对象列表中，我可以激活/非事件对象。因此，一个图标执行事件操作，另一个图标执行非事件操作，并且两者都在同一个 md-list 中。 This is what i'm tring to do 代码
如前所述 Angular-Material md-autocomplete's documentation : The md-autocomplete uses the the md-virtual-
我也在使用 Angular 1 和 Angular Material 。我想在 ng-repeat 中使用 md-subheader 和多个 md-virtual-repeat-container。您
我正在使用 Angular Material 。 当我创建自己的指令并将其添加到 md-tab-label 时，例如 Label 然后自定义指令也应用于一些“md-dummy-tab”。 但是
我在我的项目中使用 Angular Material 有一段时间了。在使用 md-select 时，我遇到了一个问题，即出现重复的 md-option 值错误。 我知道 md-options 采用唯一
我正在根据单选按钮选择设置自动完成验证 md-require-match = true/false。 默认验证是 md-require-match = true 这样用户应该从自动完成列表中选择一个项
这个问题在这里已经有了答案: Changing capitalization of filenames in Git (11 个答案) 关闭 3 年前。 我使用“readme.md”创建了我的存储库
Github有办法吗？在例如 README.md 中包含 md 文件？ # Headline Text [include](File:load_another_md_file_here.md) 它不应
我正在使用 AngularJs 开发这个动态过滤系统，并试图找出如何将 color 和 size 选项转换为在两个下拉列表中(每个类别一个)。 我尝试了以下代码，该代码成功添加了下拉列表以及选择框中的
var app = angular.module('tabsDemo', ['ngMaterial']); app.controller('TabsController',tabsController
在 md-tab 指令内嵌套 md-select 和搜索输入时遇到问题。 有两个问题: 选择框展开后，必须向上滚动才能查看搜索输入 搜索输入实际上不接受任何文本 我做了一个codepen为了更好地说明
我正在尝试处理这个片段，其中自动完成功能嵌入在芯片中。但从自动完成中选择的项目不会转换为筹码。 自动完成的数据采用以下方式:{name:"John Doe", id:"1"} 哪里错了，请指教。 问候
我是一名优秀的程序员,十分优秀！