javascript angularjs：ng-click <a> 不起作用，适用于 <button>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19108223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angularjs: ng-click on <a> not working, works on <button>
提问by daydreamer
Here is the Javascript
这是Javascript
function gotoUrl($scope, $location, $http, $window) {
$scope.setRoute = function (route) {
$location.path(route);
};
My code is
我的代码是
<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>
The routes are configured as
路由配置为
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'});
});
When I click on Transactions, it takes me to Summary
当我点击 时Transactions，它会带我到Summary
When I change the code from <a>to <button>, it works, what is that I am doing wrong here?
当我将代码从 更改<a>为 时<button>，它起作用了，我在这里做错了什么？
回答by Damax
http://docs.angularjs.org/api/ng.directive:a
http://docs.angularjs.org/api/ng.directive:a
Modifies the default behavior of the html A tag so that the default action is prevented when the href attribute is empty.
修改 html A 标记的默认行为，以便在 href 属性为空时阻止默认操作。
回答by holographic-principle
Try setting href=""instead of href="#". If you are using hashbang mode routing, the latter results in a full-page reload, which is what seems to be happening in your case as well. Any link with href="#"that you click will cause your app to fully reload the page and load the default route -- in your case Summary.
尝试设置href=""而不是href="#". 如果您使用 hashbang 模式路由，后者会导致整页重新加载，这似乎也发生在您的情况下。href="#"您单击的任何链接都会导致您的应用程序完全重新加载页面并加载默认路由 - 在您的情况下Summary。
回答by geniuscarrier
You can get rid of gotoUrl function and modify DOM to
您可以摆脱 gotoUrl 函数并将 DOM 修改为
<a href="#/transactions"><span></span>Transactions</a>
AngularJS will take care of the rest.
AngularJS 会处理剩下的事情。
回答by TalentTuner
change this code segment
更改此代码段
<li><a href="#
" data-ng-click="setRoute('transactions')"><span
class="icon-reorder"></span>
Transactions</a></li>
to
到
<li><a href="/transactions"><span
class="icon-reorder"></span>
Transactions</a></li>
