无法使用 AngularJS 访问同一视图中的元素

Question

所以一般来说，我想用 AngularJS 构建一个单页应用程序，我希望我的页面对 public 和注册用户有不同的内容，因此我把我的导航栏、内容和页脚部分分为不同的观点。结构如下所示：

index.html
script.js
navbar.html
content.html
footer.html
uirouter.html

这是 uirouter.html

的代码

<div ng-include="home.navbar"></div>
<div ng-include="home.content"></div>
<div ng-include="home.footer"></div>

这里是 script.js

的代码

var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider, $locationProvider) {
  $routeProvider
  .when('/', {
    controller: 'RouteCtrl',
    templateUrl: 'uirouter.html'
  });
});

myApp.controller('RouteCtrl', function($scope) {
  $scope.home = {
    "navbar": "navbar.html"
    "content": "content.html",
    "footer": "footer.html"
  } 
});

并将 ng-app、ng-controller 和 ng-view 放在 index.html

中

...
<body ng-app="myApp" ng-controller="RouteCtrl" id="home" data-spy="scroll" data-target=".navbar-collapse" data-offset="100">
  <div ng-view=""></div>
...

所有视图都加载得很好，但问题是当我单击导航栏上的链接时，例如 "Features" 和 "Pricing" 应该引用视图上的每个元素，但它没有不工作。这里 navbar.html 是如何

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"> <img src="images/logo.png" alt="logo"></a> </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#home">Home</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#pricing">Pricing</a></li>
      </ul>
      </li>
      </ul>
    </div>
  </div>
</nav>

所以"Features"和"Pricing"应该引用content.html

中的这些元素

...
<div id="containerfeatures" class="container"> 
  <div class="row mainFeatures" id="features">
...
<div class="row PageHead" id="pricing">
...

页面被重定向而不是引用元素，这里是 url

http://localhost/app/#/pricing

哪位觉得应该提到这个..

http://localhost/app/#pricing

我对 AngularJS 还是个新手，所以我还在四处摸索。这是我在执行此操作时遵循的教程：Use Multiple ng-view Single Page

谁能帮忙指出我的错误或者我应该怎么做才能使它们起作用？非常感谢任何帮助，非常感谢。

Answer 1

您只需在 href 中添加一个 /。

<a href="#/home">Home</a>

或者如果您将 hashPrefix（使用 $locationProvider）设置为 ! 用于 SEO，它将是

<a href="#!/home">Home</a>

Angular 将 $location 路径视为 '/pathpart1/pathpart2'

Answer 2

您尚未在配置的路由提供程序中添加/home 和/features 等路由。 href 也应如@charlietfl

所示

无法使用 AngularJS 访问同一视图中的元素

Can't access element in the same view using AngularJS

multiple-views

angularjs

single-page-application

angularjs-ng-include

ng-view