Question

这是Javascript

    function gotoUrl($scope, $location, $http, $window) {
      $scope.setRoute = function (route) {
        $location.path(route);
    };

我的代码是

      <ul class="nav navbar-nav navbar">
            <li><a href="#" data-ng-click="setRoute('summary')"><span
                    class="icon-bar-chart"></span> Summary</a></li>
            <li><a href="#
            " data-ng-click="setRoute('transactions')"><span
                    class="icon-reorder"></span>
                Transactions</a></li>
            <li><a href="#" data-ng-click="setRoute('budgets')"><span
                    class="icon-calendar"></span>
                Budgets</a></li>
        </ul>

路由配置为

app.config(function ($routeProvider) {
    $routeProvider
        .when('/summary', {templateUrl: '../static/partials/summary.html', controller: 'SummaryController'})
        .when('/transactions', { templateUrl: '../static/partials/listTransaction.html', controller: 'TransactionsManagerController'})
        .when('/profile', {templateUrl: '../static/partials/profile.html', controller: 'ProfileController'})
        .when('/new', {templateUrl: '../static/partials/addTransaction.html', controller: 'TransactionAddController'})
        .when('/budgets', {templateUrl: '../static/partials/budgets.html'})
        .otherwise({redirectTo: '/summary'});
});

当我点击Transactions时，我需要Summary

当我将代码从<a>更改为<button>时，它会起作用，我在这里做错了什么？

Answer 1

http://docs.angularjs.org/api/ng.directive:a

修改html A标记的默认行为以使其成为默认行为当href属性为空时阻止操作。

Answer 2

尝试设置href=""而不是href="#"。如果您使用hashbang模式路由，后者会导致整页重新加载，这也是您的情况下似乎正在发生的情况。您单击的href="#"链接将导致您的应用完全重新加载页面并加载默认路由 - 在您的情况下为Summary。

Answer 3

您可以摆脱gotoUrl函数并将DOM修改为

<a href="#/transactions"><span></span>Transactions</a>

AngularJS将负责其余部分。

Answer 4

更改此代码段

<li><a href="#
        " data-ng-click="setRoute('transactions')"><span
                class="icon-reorder"></span>
            Transactions</a></li>

到

<li><a href="/transactions"><span
                class="icon-reorder"></span>
            Transactions</a></li>

angularjs：点击<a> not working, works on <button></button></a>

4 个答案: