无法更改 ng-href onClick 事件

Unable to change ng-href onClick event

我的 angular 应用程序中有一个带有 button 的页脚。该按钮具有 ng-href 属性,该属性应在 ng-click 事件期间更改以影响路由机制。出于某种原因,我无法完成这项工作。最终目标是附加数字,每次单击按钮 1 到 5。

页脚是 component:

app.component('footerx', {
    bindings: {

    },
    templateUrl: 'views/footer.html',
    controller: function () {
        this.buttonText = "Next";
        var self = this;
        var i = 1;
        this.changeHref= function () {
            self.questionIndex=i;
            i++;
        }
    }
});

页脚 HTML:

<footer class="footer">
    <div class="container">
        <a class="btn btn-primary" ng-click="$ctrl.changeHref()" ng-href="#/quiz/{{questionIndex}}" id="btn">{{$ctrl.buttonText}}</a>
    </div>
</footer>

路由JS部分:

...
        .when("/quiz/:index", {
            templateUrl: "views/questionPage.html",
            controller: "questionController"
        })
...

编辑: 现在 url 没有完全改变。这意味着它没有 questionIndex。它看起来像这样:

http://localhost/myApp/#/quiz/

使用"#/quiz/{{$ctrl.questionIndex}}

<footer class="footer">
    <div class="container">
        <!-- REMOVE
        <a class="btn btn-primary" ng-click="$ctrl.changeHref()" 
                  ng-href="#/quiz/{{questionIndex}}" id="btn"> 
           {{$ctrl.buttonText}}
        </a>
        -->
        <!--ADD -->
        <a class="btn btn-primary" ng-click="$ctrl.changeHref()" 
                  ng-href="#/quiz/{{$ctrl.questionIndex}}" id="btn"> 
           {{$ctrl.buttonText}}
       </a>
    </div>
</footer>