使用带有angularjs的链接标签提交表单

I'm still new with angularJS. I've been trying to make a custom button and attach it to my form instead of using regular button. I've tried couple of approaches and so far none of them worked well. now when I press enter inside the input field I get the "results" view perfectly loaded to the main page. but when I click the search button "a" link tag the view loads then disappears instantly. as well as the location of the browser changes to "results" then goes back to "/#/" only. I have no idea why and what's causing this.

我还是新认识的angularJS。我一直在尝试做一个自定义按钮并将它附加到我的表单上，而不是使用常规按钮。我尝试过几种方法，但到目前为止，没有一种效果很好。现在，当我在输入字段中输入enter时，我得到了“结果”视图，它被完美地加载到主页上。但是当我点击搜索按钮“a”时，视图加载的链接标签立即消失。除了浏览器的位置更改为“results”之外，还返回到“/#/”。我不知道是什么原因造成的。

here's my html:

这是我的html:

<div id="search-container" ng-controller="SearchController">
  <form ng-submit="submitQuery()">
    <div>
      <input id="keywords" name="keywords" ng-model="query.keywords"  placeholder="please enter query" value="" required/><br>
      <a href="#" id="search-btn" ng-click="submitForm()"><img src="/Images/search-icon.png" alt="Search" title="Search" /></a>
    </div>
  </form>
</div>

here is my model and ngjs controllers:

这是我的模型和ngjs控制器:

var bfapp = angular.module("blogfinder", []).config(function ($routeProvider) {
  $routeProvider.when('/results', {
    templateUrl: 'PartialViews/results.html',
    controller: 'ResultsController'
  });

  $routeProvider.otherwise({ redirectTo: '/' });
});

bfapp.controller('ResultsController', function ($scope) {
});

bfapp.controller('SearchController', function ($scope, $location) {
  $scope.query = { keywords: "" };

  //on form submit
  $scope.submitQuery = function () {
    if ($scope.query.keywords !== null) {
      $location.path('/results');
    }
  };

  //on button click
  $scope.submitForm = $scope.submitQuery;
});

1 个解决方案

#1

well I feel so stupid. I've just found the solution after banging my head for couple of hours. Although this has never been mentioned on any site. All I needed is to remove "#" from <a href="#" id="search-btn" ng-click="submitForm()">. Now it works like charm.

我觉得自己很笨。我在敲了几个小时的脑袋后才找到了解决办法。尽管在任何网站上都没有提到这一点。我只需要从中删除"#"。现在它像魅力一样发挥作用。