简体   繁体   中英

Angular material nav bar not working

I tried to run this simple demo in my app:

http://codepen.io/camden-kid/pen/Kgdvgd?editors=1010#0

Do in View1.js :

'use strict';

angular.module('rfApp.view1', ['ngRoute', 'ngMaterial', 'ngMessages'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', function($scope) {
    $scope.currentNavItem = 'page1';
});

View1.html

<md-content class="md-padding">
    <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
        <md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
        <md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
        <md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
        <!-- these require actual routing with ui-router or ng-route, so they won't work in the demo
        <md-nav-item md-nav-sref="app.page4" name="page4">Page Four</md-nav-item>
        <md-nav-item md-nav-href="#page5" name="page5">Page Five</md-nav-item>
        -->
    </md-nav-bar>
    <div class="ext-content">
        External content for `<span>{{currentNavItem}}</span>`
    </div>
</md-content>

And get:

在此处输入图片说明

Issue was in my angular and angular-material version. When I changed angular to 1.5.9 and angular-material to 1.0.0 it started working

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM