Question

只是想知道AngularJS是否改变了菜单项的方式？我问的原因是他们的文档说使用md-nav-click="goto('#report')"但是当我这样做时不会运行脚本。请参阅下面的完整脚本。

   <md-nav-bar>
       <md-nav-item><a href="#/" name="home">Home</a></md-nav-item>
       <md-nav-item md-nav-click="goto('#report')" name="page2">Page Two</md-nav-item>
       <md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
    </md-nav-bar>

完整脚本

<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="IPETLOST" ng-cloak>
  <!--
    Your HTML content here
  -->
  <div layout="column" layout-fill>
  <md-toolbar>
    <div class="md-toolbar-tools" ng-controller="demoController">
      <span ng-bind="data.sitename"></span>
      <!-- fill up the space between left and right area -->
      <span flex></span>
      <md-nav-bar>
        <md-nav-item><a href="#/" name="home">Home</a></md-nav-item>
      <md-nav-item md-nav-click="goto('#report')" name="page2">Page Two</md-nav-item>
      <md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
      </md-nav-bar>
    </div>


  </md-toolbar>
  <md-content>
    Hello!
    <div data-ui-view=""></div>
    <div data-ui-view="header"></div>
    <div data-ui-view="left"></div>
    <div data-ui-view="container"></div>
    <div data-ui-view="footer"></div>
  </md-content>
</div>


  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.5/angular-ui-router.min.js"></script>
  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>

  <!-- Your application bootstrap  -->
  <script type="text/javascript">
    /**
     * You must include the dependency on 'ngMaterial'
     */
    var ipetApp = angular.module('IPETLOST', ['ngMaterial', 'ngMessages', 'ui.router']);

    ipetApp.config(function ($locationProvider, $urlRouterProvider, $stateProvider) {

       $urlRouterProvider.deferIntercept();
       $urlRouterProvider.otherwise('/404');

       $locationProvider.html5Mode({enabled: false});
       $stateProviderRef = $stateProvider;
    });

    ipetApp.controller('demoController', function ($scope) {
        $scope.data = {
            sitename: "IPET Lost Pet's"
    }});

    ipetApp.run(['$rootScope', '$state', '$stateParams',
      function ($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    }])


  ipetApp.run(['$q', '$rootScope','$http', '$urlRouter',
  function ($q, $rootScope, $http, $urlRouter)
  {
    $http
      .get("json.json")
      .success(function(data)
      {
        angular.forEach(data, function (value, key)
        {
          var state = {
            "url": value.url,
            "parent" : value.parent,
            "abstract": value.abstract,
            "views": {}
          };

          angular.forEach(value.views, function (view)
          {
            state.views[view.name] = {
              templateUrl : view.templateUrl,
            };
          });

          $stateProviderRef.state(value.name, state);
        });
        // Configures $urlRouter's listener *after* your custom listener

        $urlRouter.sync();
        $urlRouter.listen();
      });
}]);



  </script>

</body>
</html>

http://codepen.io/russellharrower/pen/YWZmre

Answer 1

使用angular js 1.5.5版本时，对于我来说，使用1.1.0-rc2版本的angular-material.min.css和angular-material.min.js，md-nav-bar和md-nav-item失败了

尝试1.1.0-rc.5版本的angular-material.min.css和angular-material.min.js

更新package.json来自＆＃34; angular-material＆＃34;：＆＃34; git + https://github.com/angular/bower-material.git#master＆＃34; to＆＃34; angular-material＆＃34;：＆＃34; ^ 1.1.0-rc.5＆＃34;根据需要

md-nav-click不起作用

1 个答案: