无法更改ng-href onClick事件

时间:2016-12-09 19:49:32

标签: angularjs ngroute angularjs-ng-href

我的button应用中有一个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/

1 个答案:

答案 0 :(得分: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>