Question

我在AngularJS资料中的md-nav-bar有一些奇怪的错误。

请在plunker中检查我的项目： Plunker Project

您可以通过ng-click或滑动内容（ng-swipe）来浏览网站。在用户使用这两种方法之前，它都非常有效。如果他单击一个导航点，然后尝试滑动，它将杀死md-nav-bar的本机突出显示效果。为什么？这是AngularJS错误吗？

有人可以帮助我吗？非常感谢！

这是我的md-nav-bar：

<div id="PagesContainer" class="" ng-controller="pageTransition" layout="column">
  <div ng-if="notFrontpage === true">
  <md-nav-bar id="TabsContainer" class="md-padding" nav-bar-aria-label="navigation links" md-selected-nav-item="currentNavItem">
    <md-nav-item md-nav-href="#" name="home" data-nav-item-id="0" ng-click="PageTurn($event.currentTarget)">< Home</md-nav-item>
    <md-nav-item md-nav-href="#first_tab" name="firstTab" data-nav-item-id="1" ng-click="PageTurn($event.currentTarget)">FirstTab</md-nav-item>
    <md-nav-item md-nav-href="#second_tab" name="secondTab" data-nav-item-id="2" ng-click="PageTurn($event.currentTarget)">SecondTab</md-nav-item>
    <md-nav-item md-nav-href="#third_tab" name="thirdTab" data-nav-item-id="3" ng-click="PageTurn($event.currentTarget)">ThirdTab</md-nav-item>
  </md-nav-bar>
  </div>
  <div class="ext-content page" ng-view md-swipe-left="PageSwipe(1)" md-swipe-right="PageSwipe(-1)"></div>

还有我的angularjs脚本：

var myApp_Tabs = angular.module('AppTabs', ['ngMaterial', 'ngRoute']);
var lastID = 0;
var maxID = 3;
var element_PagesContainer = angular.element(
  document.querySelector('#PagesContainer')
);

// Route Config
myApp_Tabs.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'home.html',
      controller: 'HomeCtrl',
    })
    .when('/first_tab', {
      templateUrl: 'first_tab.html',
      controller: 'FirstCtrl',
    })
    .when('/second_tab', {
      templateUrl: 'second_tab.html',
      controller: 'SecondCtrl',
    })
    .when('/third_tab', {
      templateUrl: 'third_tab.html',
      controller: 'ThirdCtrl',
    });
  $locationProvider.hashPrefix('');
});

// Controllers
myApp_Tabs.controller('HomeCtrl', function($rootScope) {
  $rootScope.currentNavItem = 'home';
  $rootScope.notFrontpage = false;
  lastID = 0;
});

myApp_Tabs.controller('FirstCtrl', function($rootScope) {
  $rootScope.currentNavItem = 'firstTab';
  $rootScope.notFrontpage = true;
  lastID = 1;
});

myApp_Tabs.controller('SecondCtrl', function($rootScope) {
  $rootScope.currentNavItem = 'secondTab';
  $rootScope.notFrontpage = true;
  lastID = 2;
});

myApp_Tabs.controller('ThirdCtrl', function($rootScope) {
  $rootScope.currentNavItem = 'thirdTab';
  $rootScope.notFrontpage = true;
  lastID = 3;
});

myApp_Tabs.controller('pageTransition', function($scope, $location) {
  $scope.PageTurn = function(item) {
    var id = parseInt(item.attributes['data-nav-item-id'].value);
    $scope.ChangePage(id, false);
  };

  $scope.PageSwipe = function(which_direction) {
    var id = lastID + which_direction;
    if (id < 0) {
      id = 0;
    } else if (id > maxID) {
      id = maxID;
    }
    $scope.ChangePage(id, true);
  };

  $scope.ChangePage = function(id, swiped) {
    if (swiped == true) {
      if (id == 0) {
        $location.url('/');
      } else if (id == 1) {
        $location.url('/first_tab');
      } else if (id == 2) {
        $location.url('/second_tab');
      } else if (id == 3) {
        $location.url('/third_tab');
      }
    }

    lastID = id;
  };
});

使用md-swipe时AngularJS材质md-nav-bar issus

0 个答案: