2013-06-23 18 views
11

Sono ancora nuovo con angularJS. Ho cercato di creare un pulsante personalizzato e collegarlo al mio modulo invece di utilizzare il pulsante normale. Ho provato un paio di approcci e finora nessuno di loro ha funzionato bene. ora quando premo invio all'interno del campo di input ottengo la vista "risultati" perfettamente caricata sulla pagina principale. ma quando faccio clic sul pulsante di ricerca "un" tag link la vista carica poi scompare all'istante. così come la posizione del browser cambia in "risultati", quindi torna a "/ # /" solo. Non ho idea del perché e di cosa sta causando questo.invia modulo utilizzando tag di collegamento con angularjs

ecco il mio 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> 

qui è il mio modello e ngjs controllori:

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; 
}); 

risposta

13

bene mi sento così stupido. Ho appena trovato la soluzione dopo aver sbattuto la testa per un paio d'ore. Anche se questo non è mai stato menzionato su nessun sito. Tutto ciò di cui avevo bisogno è rimuovere "#" da <a href="#" id="search-btn" ng-click="submitForm()">. Ora funziona come un fascino.

+0

puoi passare anche la forma come argomento del tuo metodo per verificare la validità del modulo, visualizzare gli errori, ecc.? – svassr

+0

si, si può fare – SolidSnake

Problemi correlati