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文件，一个是显示所有博客，另一个是选定博客的详细页面

所有博客的页面：

    <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>

特定博客的页面：

        <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>

我有问题：

当我点击“阅读更多”链接时，博客详情页面不显示博客。但是，网址很好，特定的博客标题会附加到网址上。好像$ scope.selectedBlog是空的。
我可以在链接上使用“ui-sref”，但是还可以动态地将博客标题附加到网址吗？

e.g。

<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编码..但我没有检查过。

希望这能让你走上正轨。

angularjs两个状态一个控制器

1 个答案: