angularjs - 无法更改 ng-href onClick 事件

Question

button我的应用程序中有一个带有 a 的页脚angular。按钮有一个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/

Answer 1

利用"#/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>