Angular ng-href 不起作用

Question

我正在使用 Chrome 并设置了侦听端口 8080 并提供所有列出的文件的节点服务器。 Angular app.js假设显示StuffView.html（简单文本）的内容。

index.html :

<!doctype html>
<html ng-app="app">
    <head>
        <meta charset="utf-8">
        <title>angular</title>
        <link rel="icon" href="">
        <link rel='stylesheet' href="css/style.css">
        <script src="libs/angular/angular.js"></script>
        <script src="libs/angular-route/angular-route.js"></script>
        <script src="app.js"></script>
        <script src="js/controllers/StuffController.js"></script>
    </head>
    <body>
        <div>
            <a ng-href = "#/stuff"> show stuff </a>
            <ng-view></ng-view>
        </div>
    </body>
</html>

app.js:

angular
.module( 'app', [ 'ngRoute' ] )
.config( function( $routeProvider ) {

    $routeProvider.when( '/stuff', {
        templateUrl : "views/StuffView.html",
        controller : "stuffController"
    } );

} );

StuffView.html:

<H1>Hello from Stuff View! {{hello}}</H1>

其中 {{hello}} 来自 stuffController :

angular
.module( 'app' )
.controller( 'stuffController', stuffController );

function stuffController( $scope ) {
    $scope.hello = 'Hello from stuffController! ';
}

当我点击 link 时，浏览器中的地址变为 http://localhost:8080/#!#%2Fstuff 并且没有显示任何内容。控制台中没有错误。我错过了什么？

Answer 1

我认为您以错误的方式使用了 ng-href，请参阅 angular 文档了解 ng-href。

https://docs.angularjs.org/api/ng/directive/ngHref

您应该为 pathforstuff 创建一个名为 path 的变量，然后如下使用该变量。

var pathforstuff="stuff";

<a ng-href="#/{{pathforstuff}}"/>Take Me Somewhere</a>

Answer 2

ngRoute模块使用请参考此link。不要在静态情况下使用 'ng-href' 目录，而是尝试：

<a href = "#/stuff"> show stuff </a>

Angular ng-href 不起作用

Angular ng-href doesn't work

html

javascript

angularjs

angularjs-ng-href

ngroute