将变量从控制器传递到路由参数

Question

....           

.state('books', {
            url: '/book/chapter/:chap',
            templateUrl: "views/chapter.html",
            params: { chap: .........}
        })

嗨！我在特定控制器中有一个变量，我想将它的值传递给路由参数。最后我想更改该变量的值，以便我可以使用相同的路由创建新的 url。

我正在使用 ui-路由器，您可能已经注意到了。

我也很好奇你会如何解决以下问题：基本上我想打开一本书的特定章节，比如第 5 章。然后我想在页面左侧显示每个剩余章节的 link，这就是为什么我想更改变量的值.你会如何使用 ng-repeat 解决这个问题？我正在考虑使用 getArticle（如下所示）获取章节编号，然后使用 ng-repeat ng-repeat 剩余的章节？想法？

angular
    .module('BookLibrary')
    .controller("ChapterController", ["$scope","stateParams", "ChapterControllerService", function($scope, $stateParams, ChapterControllerService){

        $scope.chapterList = ChapterControllerService.chapters;
        $scope.getArticle = chapterList[0].chapter;

    }]);

章节列表如下所示：

chapterList = [
        { 
            chapter: "1",
            content: "Chapter 1 goes here"
        },
        {
            chapter: "2",
            content: "Chapter 2 goes here"
        },
        {
            chapter: "3",
            content: "Chapter 3 goes here"
        }
    ];

Answer 1

这里有多个问题，所以从您的状态参数开始。在状态参数中，您可以像这样在状态中声明参数的默认值。

.state('books', {
        url: '/book/chapter/:chap',
        templateUrl: "views/chapter.html",
        params: { chap: null}
    })

这会将值默认为 null。也许您总是想默认到第 1 章？如果是这种情况，您可以使用 params: {chap: '1'} （因为您使用的是字符串）。要将值传递给状态，有多种方法可以做到。假设您使用的是 ui-sref，您可以直接在 link 中传递参数值。

ui-sref="books({ chap: 3 })"

但是您希望使用 ng-repeat 从对象中获得 link 的列表。所以你可以这样做

<ul>     
   <li ng-repeat="chapter in chapterList">
      <a ui-sref="books({chap: chapter.chapter})">{{chapter.chapter}}</a>
   </li>
</ul>

你已经在你的控制器中包含了 $stateParams 所以你只需要像这样从它获取参数

angular
.module('BookLibrary')
.controller("ChapterController", ["$scope","$stateParams", 
"ChapterControllerService", function($scope, $stateParams, 
ChapterControllerService){

    $scope.currentChapter = $stateParams.chap;

    $scope.chapterList = ChapterControllerService.chapters;
    $scope.getArticle = chapterList[0].chapter;

}]);

将变量从控制器传递到路由参数

Passing a variable from a controller into a route param

angularjs

angular-ui-router

routeparams