md-nav-bar抛出TypeError:无法读取未定义

时间:2016-11-28 03:53:42

标签: angularjs navigationbar

我使用了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

0 个答案:

没有答案