AngularJS

Question

我正在使用 ui-router 创建一些路线，但我遇到了一件非常奇怪的事情。

我有这个路由配置

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

所以当我碰杯时：

<a ui-sref="chapter_route({ chap: getChapter.title})">CHAPTER:</a>

它按照我的意愿将我重定向到以下 ui-view:

    <div class="panel panel-default">
                        <div class="panel-body">
                            <p>{{getChapter.title}}</p>
                            {{getChapter.content}}
                        </div>
    </div>
......
......
        <div class="panel panel-default" data-ng-repeat="cha in allChapters">
            <div class="panel-body">
                <a ui-sref="chapter_route({ chap: cha.title})" ng-click="changeChapter(chap)">{{cha.title}}</a> {{cha.content | limitTo: 100}}.
                <button ng-click="changeChapter(article)">PRESS ME </button>
            </div>
        </div>

如你所见，我这里有另一个 <a> 标签，它应该将我发送到不同的章节并更改章节

的值

getChapter 类似于：

$scope.allChapters = [
    {
        title: "title 1",
        chapter: "the whole chapter goes here"
    },
    {
        title: "title 2",
        chapter: "the whole chapter 2 goes here"
    },
    {
        title: "title 3",
        chapter: "the whole chapter 3 goes here"
    }
    ];

$scope.getChapter = $scope.allChapters[0];

changeChapter 看起来像这样：

$scope.changeChapter = function(chap){
    $scope.getChapter = chap;
    console.log($scope.getChapter);
};

所以这是真正发生的事情：我首先展示第一章并为接下来的所有章节创建链接。如果我点击 <a> 标签，它会使用 ng-click 更改 getChapter 的值，并将其完美地打印在控制台上，但它不会更改本章的 ui-view ，除非我点击它再次。我可以看到 ui-view 有几分之一秒的变化，但它不会停留，它会快速加载第一章的 ui-view。但如果我再次单击，它会显示我正在单击的章节。所以，我需要点击两次才能改变，这很奇怪。

但是，如果我决定单击 "PRESS ME" 按钮，它会直接进入 ui-view 中的下一章。根据章节标题，我希望能够单击 <a> 标签并更改为不同的 ui-view，同时具有不同的 url。

知道是什么导致了这个奇怪的错误吗？

谢谢:)

编辑：

https://plnkr.co/edit/D6f9Q3fhL294DukEZFOz?p=preview

我为我们正在讨论的问题添加了一个简单的插件，这样您可以更好地了解我在说什么。

Answer 1

Check this plunker for your working example

你必须为此使用 $state.go。

$scope.changeChapter = function(chap){
    $scope.getChapter = chap;
    $state.go('chapter_route', {chap: chap});
    console.log($scope.getChapter);
};

注意：不要忘记在控制器中添加$state。

Answer 2

问题出在您的控制器代码 $scope.getChapter = $scope.allChapters[0]; 这里，对于所有情况，您都将当前章节与第一章进行硬编码，因此在所有情况下，它只会呈现相同的内容。将其替换为 if (!$stateParams.chap) { $scope.selectedChapter = $scope.allChapters[0]; }。它会解决你的问题。 Updated Plunker with Fix

AngularJS - ui-routing 和 ng-click 无法正常工作

AngularJS - ui-routing with ng-click not working properly

angular-ui-router

angularjs-ng-repeat

angularjs-ng-click

ng-view