angularjs 两种状态一个控制器

Question

对不起，我什至不知道如何命名标题。 我在学习 angularjs 时正在实现一个博客页面。

我有我的 app.config

    .state('blogs', {
        url: '/blogs',
        templateUrl: 'template/partial-blogs.html',
        controller:'blogsController'
    })
    .state('blogdetail', {
        url: '/blogs/:blogTitle',
        templateUrl: 'template/partial-blog-detail.html',
        controller:'blogsController'
    })

然后我有一个控制器“blogsController”：

.controller('blogsController',function($scope,$http,$location){ 
var refresh = function(){
        $http.get('/retrieveblogs').success(function(response){
        $scope.articles = response;
        $scope.blog=null;
    });
};
refresh();
$scope.readmore = function(item){    
    $scope.selectedBlog = item;
    $location.path('/blogs/'+$scope.selectedBlog.title);
};

})

然后我有两个 html 文件，一个用于显示所有博客，另一个是所选博客的详细信息页面

1. 所有博客的页面：

       <div ng-repeat="article in articles | filter:searchText | startFrom:currentPage*pageSize|limitTo:pageSize" class="wholearticle">
           <h1>{{article.title}}</h3>
           <div class="well poster">
               <span><i class="fa fa-user"></i>{{article.author}}</span>
               <span><i class="fa fa-calendar"></i>{{article.posttime|date:'medium'}}</span>
           </div>
           <p class="well blogbody">{{article.body|limitTo:500}}</p>
               <a ng-click="readmore(article)">Read More</a>
           <div class="col-xs-12"><hr/></div>
       </div>
   

2. 特定博客的页面：

           <h1>{{selectedBlog.title}}</h3>
           <div class="well">
               <span><i class="fa fa-user"></i>{{selectedBlog.author}}</span>
               <span><i class="fa fa-calendar"></i>{{selectedBlog.posttime|date:'medium'}}</span>
           </div>
           <p class="well blogbody">{{selectedBlog.body}}</p>
   

我有问题：

1. 当我单击“阅读更多”链接时，博客详细信息页面不显示该博客。但是，该 url 很好，特定博客的标题附加到该 url。 $scope.selectedBlog 似乎是空的。
2. 我可以在链接上使用“ui-sref”，同时还能动态地将博客标题附加到 url 中吗？

例如

<a ng-click="readmore(article)" ui-sref="???">Read More</a>

Answer 1

当您转到 $location.path('/blogs/'+$scope.selectedBlog.title); 时，控制器会重新初始化，因此 $scope.selectedBlog = item; 在您重定向之前有一个值，现在为空。

您应该使用 2 个控制器：一个用于文章列表，另一个用于单个文章，没有理由只使用一个。

您的路线如下所示：

.state('blogs', {
        url: '/blogs',
        templateUrl: 'template/partial-blogs.html',
        controller:'blogsController'
    })
    .state('blogs.article', {
        //now this state is a child of blogs (that's what the . does in the name)
        url: '/:articleId/:blogTitle',
        templateUrl: 'template/partial-blog-detail.html',
        controller:'blogArticleController'
    })

控制器：

.controller('blogsController',function($scope,$http,$state){ 
   var refresh = function(){
        $http.get('/retrieveblogs').success(function(response){
        $scope.articles = response;
        $scope.blog=null;
    });
   };
   refresh();
   $scope.readmore = function(item){    
     $state.go('blogs.article', {articleId: item.id, blogTitle: item.title});
   }
 })
.controller('blogArticleController',function($scope,$http,$routeParams){ 
   var refresh = function(){
        $http.get('/retrieveblog_article_by_id from $routeParams').success(function(response){
        $scope.article = response;
    });
};
};

item.title 应该是一个只有字母和数字的字符串。我认为$state.go 会 url 编码.. 但我还没有检查。

希望这能让你走上正轨。