Question

我在导航中使用Google的MDL标签。但是 - 我想简单地添加href属性并向用户发送适当的路由（使用ngRoute），而不是显示已在视图中显示内容的标签。

MDL的库会抛出此错误（因为它试图在页面上找到该标签的内容）：

未捕获的SyntaxError：无法执行＆＃39; querySelector＆＃39; on＆＃39;元素＆＃39;：＆＃39;＃/ url1＆＃39;不是有效的选择器。

这有什么办法吗？或者更好的方法来完成这个？我不想创建一个复制选项卡CSS的新课程，因为我必须将其同步为MDL更新。

＆＃13;

angular.module('app', ['ngRoute'])
    .controller('controller', function($scope){
      $scope.urls = ['#/url1', '#/url2', '#/url3', '#/url4'];
    });

＆＃13;

<link href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css" rel="stylesheet"/>
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>


<div ng-app="app" ng-controller="controller" class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
    </div>
    <!-- Tabs -->
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a ng-repeat="url in urls" ng-href="{{url}}" class="mdl-layout__tab">{{url}}</a>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
  </div>
  <main class="mdl-layout__content">
    asdf
  </main>
</div>

＆＃13;

使用带有href属性的Google Material Design Lite选项卡

0 个答案: