2013-06-23 5 views
11

Я все еще новичок в angularJS. Я пытался создать пользовательскую кнопку и прикрепить ее к моей форме вместо обычной кнопки. Я пробовал пару подходов, и до сих пор никто из них не работал хорошо. теперь, когда я нажимаю кнопку ввода внутри поля ввода, я получаю представление «результаты», полностью загруженное на главную страницу. но когда я нажимаю кнопку тега «а» кнопки поиска, просмотр загружается, а затем исчезает мгновенно. а также расположение браузера изменяется на «результаты», а затем возвращается только к «/ # /». Я понятия не имею, почему и что вызывает это.submit form with link tag with angularjs

вот мой 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; 
}); 

ответ

13

хорошо я чувствую себя так глупо. Я только что нашел решение, ударив головой пару часов. Хотя это никогда не упоминалось ни на одном сайте. Все, что мне нужно, это удалить «#» с <a href="#" id="search-btn" ng-click="submitForm()">. Теперь это работает как шарм.

+0

Вы также можете передать форму в качестве аргумента своего метода для проверки действительности формы, ошибок отображения и т. Д.? – svassr

+0

Да, это можно сделать – SolidSnake