Question

我正在尝试在网站中使用Angular Material md-tabs，其中每个标签代表使用ng-view标签确定的不同网址。该网站位于：here。在视觉上它可以工作，但我每次更改标签时都会注意到页面被加载了5次....每个标签位置一次。

我是否需要更改设置或其他内容以正确执行此操作？

标签的代码如下：

       <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>

Answer 1

对于那些仍对此感兴趣的人：您需要使用md-on-select指令来调用控制器中的函数，以重定向到$ routeProvider所理解的另一个URL，例如：

<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>&nbsp;Dashboard
      </md-tab-label>
    </md-tab>
    <md-tab md-on-select="vm.tabReports()">
      <md-tab-label>
        <md-icon>trending_up</md-icon>&nbsp;Reports
      </md-tab-label>
    </md-tab>
    <md-tab md-on-select="vm.tabManageEmployee()">
      <md-tab-label>
        <md-icon>people</md-icon>&nbsp;Manage Employee
      </md-tab-label>
    </md-tab>
     :
     :
  </md-tabs>
  <div ng-view></div>
</md-content>
:
</body>

并在您的appController中执行以下操作：

(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');
    };
}
})();

希望这有帮助。

Answer 2

每页不应超过ng-view个。{p>如果您需要包含不同的HTML文件，则应使用ng-include。

<div ng-include="'template.html'">

注意内部撇号。

Answer 3

每次更改当前路线时，Ng-view都会刷新。另请参阅ngRoute文档。您可以通过为每个选项卡创建自定义指令来避免这种情况，这些选项卡将在您单击相应选项卡后加载所需的模板。

ngView用作DOM中的最高级别视图，特别是使用一次。当您需要加载不同的选项卡时，建议使用指令。有关您可以找到的指令的文档here。

如何在AngularJS和Angular Material中正确使用ng-View和md-tabs

3 个答案: