不使用带有 angularjs 参数的 ngroute 加载我的页面答案

【问题标题】：does not load my page using ngroute with parameter in angularjs不使用带有 angularjs 参数的 ngroute 加载我的页面
【发布时间】：2019-10-28 14:01:06
【问题描述】：

我是 angularjs 中的新东西，我有一个页面会重定向到另一个带有参数 id 的页面，但这不会加载任何内容，我不知道出了什么问题。

这是我用参数调用url的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>

【问题讨论】：

代码在哪里给$scope.id赋值？

标签： angularjs ngroute

【解决方案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

【讨论】：

【解决方案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>

希望这会有所帮助。

【讨论】：