【问题标题】:Angularjs routing not working with base hrefAngularjs路由不适用于基本href
【发布时间】:2016-10-27 22:33:12
【问题描述】:

作为一个示例程序,我从教程中下载了this plunker,以测试不同页面中的标签路由。我下载了完整的 zip 并按原样运行(例如,同一目录中的文件,链接是 CDN),但它不起作用。我认为角度文件不包括在内,因为它显示了这个输出:

单击以下选项之一。

tab 1<br/>
tab 2

{{ path }}   //supposed to model the variable

但它在 plunker 中运行良好。基本href路径或版本有问题吗?我尝试包含我自己的 angular.min.js 文件而不是链接,但它仍然不起作用。

这里是html:

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js" data-require="angular.js@1.2.x"></script>
  <script src="http://code.angularjs.org/1.2.7/angular-route.js"></script>
  <script src="app.js"></script>
</head>

<body ng-app="plunker">
  <div ng-controller="NavCtrl">
    <p>Click one of the following choices.</p>
    <ul>
      <li ng-class="{active: isActive('/tab1')}"><a href="#/tab1">tab 1</a>
      </li>
      <li ng-class="{active: isActive('/tab2')}"><a href="#/tab2">tab 2</a>
      </li>
    </ul>
    <pre>{{ path }}</pre>
  </div>
  <div ng-view></div>
</body>

</html>

【问题讨论】:

  • document.write('');错了
  • 你能告诉我有什么问题吗?它在我链接的 plunker 中运行良好。
  • 我认为我同意@DavidLin 的观点,因为您错误地使用了 标签。似乎您正在尝试使用它来确定页面上引用的文件的位置(即

标签: javascript angularjs


【解决方案1】:

因为document.location 正在向您返回Object,请尝试document.location.origin

【讨论】:

  • 还是不行。如您所见,为什么 document.location 可以在 plunker 中工作?
  • 在 Angular 应用程序中以 html5 模式编写链接时,我们永远不想使用相对链接。如果您使用 root 服务您的应用程序,那将不是问题;但是,如果您在任何其他基本路线上提供服务,我们的 Angular 应用程序将无法处理它。或者,您可以使用 HTML 文档的 HEAD 部分中的 标记设置应用程序的基本 URL: 因此,如果您想让它动态化,您应该获取基本 URL通过 document.location.origin
【解决方案2】:

尝试使用ng-href="tab1" 而不是href="#/tab1"

【讨论】:

    猜你喜欢
    • 2016-12-07
    • 1970-01-01
    • 1970-01-01
    • 2016-10-10
    • 2018-01-07
    • 1970-01-01
    • 2017-01-06
    • 2013-07-06
    • 2016-09-27
    相关资源
    最近更新 更多