我使用了Angular的NavigationBar和 md-nav-href & md-nav-click ,如下所示。 第二个NavigationBar工作正常。 但是第一个在控制台日志上抛出错误消息的NavigationBar作为帖子的底部。
我不知道 md-nav-href& amp; md-nav-click ,为什么md-nav-href会抛出错误信息并且md-nav-click不要抛出???
您可以在此链接http://codepen.io/mnguyencntt/pen/ENvGBM上查看我的代码和错误的详细信息。单击第一个NavigationBar或第二个NavigationBar,然后在浏览器的控制台日志中看到错误:
<body layout="row" ng-app="myApp" ng-cloak>
<script type="text/ng-template" id="page.html">
<!-- First Navigation Bar - TypeError: Cannot read property 'getName' of undefined -->
<md-nav-bar md-selected-nav-item="vm.selected" aria-label="Label">
<md-nav-item md-nav-href="#!/app/{{::tab}}", name="{{::tab}}", ng-repeat="tab in vm.tabs">{{::tab}}</md-nav-item>
</md-nav-bar>
<!-- Second Navigation Bar - Working fine -->
<md-nav-bar md-selected-nav-item="vm.selected" aria-label="Label">
<md-nav-item md-nav-click="vm.clickNavigation(tab)", name="{{::tab}}", ng-repeat="tab in vm.tabs">{{::tab}}</md-nav-item>
</md-nav-bar>
<md-content>
<h1 ng-if="vm.selected === 'one'">One</h1>
<h1 ng-if="vm.selected === 'two'">Two</h1>
<h1 ng-if="vm.selected === 'three'">Three</h1>
</md-content>
</script>
<div>
<div class="window" ng-view></div>
</div>
</body>
在app.js文件上编码javascript:
<!-- App.js file -->
var app = angular.module('myApp', [
'ngMaterial',
'ngRoute'
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/app/:tab', {
controller : 'AppController',
caseInsensitiveMatch : true,
controllerAs : 'vm',
templateUrl :'page.html'
})
.otherwise({
redirectTo : '/app/one'
});
});
app.controller('AppController', AppController);
AppController.$inject = ['$scope', '$window', '$routeParams'];
function AppController($scope, $window, $routeParams) {
var vm = this;
vm.tabs = ['one', 'two', 'three'];
vm.selected = $routeParams.tab;
console.log('vm.selected', vm.selected);
vm.clickNavigation = clickNavigation;
function clickNavigation(navItem){
$window.location.href = '#!/app/' + navItem;
}
}
此处第一个NavigationBar的控制台日志上的错误消息:
TypeError: Cannot read property 'getName' of undefined
at angular-material.min.js:10
at o._findTab (angular-material.min.js:10)
at o._getTabByName (angular-material.min.js:10)
at o._updateTabs (angular-material.min.js:10)
at angular-material.min.js:10
at angular.js:9605
at e (angular.js:5805)
at angular.js:6171