如何在 AngularJS 和 Angular Material 中正确使用带有 md-tabs 的 ng-View [英] How to correctly use ng-View with md-tabs in AngularJS and Angular Material
问题描述
我正在尝试在网站中使用 Angular Material md-tabs，其中每个选项卡代表使用 ng-view 标签确定的不同 url.该网站位于:此处.从视觉上看它有效，但我注意到每次更改选项卡时页面都会加载 5 次......每个选项卡位置一次.
是否需要更改设置或某些内容才能正确执行此操作?
标签的代码如下:
<md-content class="md-padding"><md-tabs md-dynamic-height md-border-bottom md-selected="selectedIndex"><md-tab label="精选"><md-content class="md-padding"><div ng-view></div></md-content></md-tab><md-tab label="出售艺术品"><md-content class="md-padding"><div ng-view></div></md-content></md-tab><md-tab label="哲学"><md-content class="md-padding"><div ng-view></div></md-content></md-tab><md-tab label="政策"><md-content class="md-padding"><div ng-view></div></md-content></md-tab><md-tab label="联系我们"><md-content class="md-padding"><div ng-view></div></md-content></md-tab></md-tabs></md-content>对于那些仍然对此感兴趣的人:您需要使用 md-on-select 指令来调用控制器中的函数重定向到 $routeProvider 理解的另一个 url，例如:
:<md-content flex><md-tabs md-dynamic-height md-border-bottom md-stretch-tabs="always"><md-tab md-on-select="vm.tabDashboard()"><md-tab-label><md-icon>仪表板</md-icon> 仪表板</md-tab-label></md-tab><md-tab md-on-select="vm.tabReports()"><md-tab-label><md-icon>trending_up</md-icon> 报告</md-tab-label></md-tab><md-tab md-on-select="vm.tabManageEmployee()"><md-tab-label><md-icon>人员</md-icon> 管理员工</md-tab-label></md-tab>::</md-tabs><div ng-view></div></md-content>:并在您的 appController 中执行以下操作:
(函数(){angular.module('app', ['ngMaterial', 'ngRoute', 'ngResource', 'md.data.table']).controller('appController', appController).config(function ($routeProvider) {$routeProvider.when('/仪表板', {templateUrl: '/views/dashboard.html'}).when('/报告', {templateUrl: '/views/reports.html'}).when('/manageEmployee', {templateUrl: '/views/manageEmployee.html'}).除此以外({templateUrl: '/views/otherwise.html'});});功能 appController($mdMedia, $scope, $http, session, $location) {var vm = 这个；vm.tabDashboard = 函数 () {$location.path('/仪表板');};vm.tabReports = 函数 () {$location.path('/reports');};vm.tabManageEmployee = 函数 () {$location.path('/manageEmployee');};}})();希望这会有所帮助.
I am trying to use Angular Material md-tabs in a web site where each tabs represents a different url determined using an ng-view tag. The web site is here: here. Visually it works but I'm noticing the pages get loaded 5 times every time I change the tab .... once for each tab location.
Is there a setting or something I need to change to do this correctly?
The code for the tabs is as follow:
<div class="tabsdemoDynamicHeight">
<md-content class="md-padding">
<md-tabs md-dynamic-height md-border-bottom md-selected="selectedIndex">
<md-tab label="Featured">
<md-content class="md-padding">
<div ng-view></div>
</md-content>
</md-tab>
<md-tab label="Art For Sale">
<md-content class="md-padding">
<div ng-view></div>
</md-content>
</md-tab>
<md-tab label="Philosophy">
<md-content class="md-padding">
<div ng-view></div>
</md-content>
</md-tab>
<md-tab label="Policies">
<md-content class="md-padding">
<div ng-view></div>
</md-content>
</md-tab>
<md-tab label="Contact Us">
<md-content class="md-padding">
<div ng-view></div>
</md-content>
</md-tab>
</md-tabs>
</md-content>
</div>
For those who are still interested in this: you need to use md-on-select directive to call a function in the controller to redirect to another url understood by your $routeProvider, for instance:
<body ng-app="app" ng-controller="appController as vm" layout="column">
:
<md-content flex>
<md-tabs md-dynamic-height md-border-bottom md-stretch-tabs="always">
<md-tab md-on-select="vm.tabDashboard()">
<md-tab-label>
<md-icon>dashboard</md-icon> Dashboard
</md-tab-label>
</md-tab>
<md-tab md-on-select="vm.tabReports()">
<md-tab-label>
<md-icon>trending_up</md-icon> Reports
</md-tab-label>
</md-tab>
<md-tab md-on-select="vm.tabManageEmployee()">
<md-tab-label>
<md-icon>people</md-icon> Manage Employee
</md-tab-label>
</md-tab>
:
:
</md-tabs>
<div ng-view></div>
</md-content>
:
</body>
and in your appController do something like this:
(function () {
angular.module('app', ['ngMaterial', 'ngRoute', 'ngResource', 'md.data.table'])
.controller('appController', appController)
.config(function ($routeProvider) {
$routeProvider
.when('/dashboard', {
templateUrl: '/views/dashboard.html'
})
.when('/reports', {
templateUrl: '/views/reports.html'
})
.when('/manageEmployee', {
templateUrl: '/views/manageEmployee.html'
})
.otherwise({
templateUrl: '/views/otherwise.html'
});
});
function appController($mdMedia, $scope, $http, session, $location) {
var vm = this;
vm.tabDashboard = function () {
$location.path('/dashboard');
};
vm.tabReports = function () {
$location.path('/reports');
};
vm.tabManageEmployee = function () {
$location.path('/manageEmployee');
};
}
})();
Hope this helps.
这篇关于如何在 AngularJS 和 Angular Material 中正确使用带有 md-tabs 的 ng-View的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
