Question

我是angularjs的新手，我有一个页面可以重定向到另一个带有参数id的页面，但这不加载任何内容，我不知道这是怎么回事。

这是home.html，我在其中使用参数调用网址

 <div class='card_actions'>
     <a href="#/post/{{id}}" class="btn-btn--m btn--blue btn--flat" lx-ripple>Leer mas
     </a>
 </div>

这是我使用id参数分配地址的控制器 app.js

var app = angular.module('FinalApp',['ngResource','lumx','ngRoute'])
app.config(["$routeProvider","$locationProvider",function(route,location){
    location.hashPrefix('');
    route
        .when('/',{
            controller: 'MainController',
            templateUrl: 'templates/home.html'
        })
        .when('/post/:id',{
            controller: 'PostController',
            templateUrl: 'templates/post.html' 
        })
         .otherwise("/");
}]);

这是post.html页面的控制器

app.controller('PostController',function($scope,$resource,$routeParams){

    Post = $resource('https://jsonplaceholder.typicode.com/posts/id',{id:'@id'});
    $scope.post = Post.get({id:$routeParams.id});

});

这是我要加载的页面 post.html

<div class='card-top-space'>
    <div class='p+' style="background-color: red">
        <strong class='fs-headline display-block tc-red-900'>
            {{post.title}}
        </strong>
        <div class='paragrah fs-body-1 mt+'>
            {{post.body}}
        </div>
    </div>      
</div>

Answer 1

如果您的href中有角度代码，则需要改用ngHref。您的href中有{{id}}。

在您的 home.html

中尝试一下

<div class='card_actions'>
  <a ng-href="#/post/{{id}}" class="btn-btn--m btn--blue btn--flat" lx-ripple>Leer mas</a>
</div>

有关ngHref上的文档，请参见here

Answer 2

您的href无法处理路由中的{{id}}。这是因为它是AngularJS expression。如果您想要anchor tag（<a>）的路径具有角度表达式，则需要使用称为ng-href的东西代替href。

您可以参考this StackOverflow article来更好地理解它。

因此可以进入 home.html ：

 <a ng-href="#/post/{{id}}" class="btn-btn--m btn--blue btn--flat" lx-ripple>Leer mas
 </a>

希望这会有所帮助。

不会使用ngroute和angularjs中的参数加载我的页面

2 个答案: