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! ';
}

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

Answer 1

我认为您以错误的方式使用了ng-href，请参阅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

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

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

Angular ng-href不起作用

2 个答案: