Question

我还是使用angularJS的新手。我一直在尝试制作一个自定义按钮并将其附加到我的表单而不是使用常规按钮。我尝试了几种方法，到目前为止，它们都没有奏效。现在，当我在输入字段中按Enter键时，我将“结果”视图完美地加载到主页面。但当我点击搜索按钮“a”链接标签时，视图加载然后立即消失。以及浏览器的位置更改为“结果”，然后仅返回“/＃/”。我不知道为什么以及造成这种情况的原因。

这是我的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>

这是我的模型和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;
});

Answer 1

好吧，我觉得很蠢。我刚刚敲了几个小时就找到了解决方案。虽然这在任何网站上从未被提及过。我只需要从<a href="#" id="search-btn" ng-click="submitForm()">中删除“＃”。现在它就像魅力一样。

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

1 个答案: