Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS: recommended way of triggering a function via enter
    primarykey
    data
    text
    <p>Consider an application where one can trigger a database search by giving input to a textfield, then pressing enter. The search result should be shown immediately after.</p> <p>To accomplish this, i created an input element and gave it a directive attribute:</p> <pre><code>&lt;input search-shipment type="text"&gt; // Directive Shipment.directive('searchShipment',function(){ return{ restrict: 'A', link: function(scope,element){ element.bind('keydown',function(e){ if (e.which === 13){ scope.shipment.fetchShipment(); } }) } } }); </code></pre> <p>The function that was triggered:</p> <pre><code>Shipment.prototype.fetchShipment = function(){ $http.post('../sys/core/fetchShipment.php',{ // some data to POST }).success(function(data){ console.log(data); }); console.log(finished); }; </code></pre> <p>This caused some weird behaviour. The function was triggered, and "finished" was logged to the console. However, <code>success()</code> was apparently triggered to late, <code>data</code> was not logged until i made another input which has to be something different than <kbd>return</kbd></p> <p>Now i have figured out that i can avoid this behaviour by using a form as a wrapper for my input element, then using ng-submit to trigger my function. </p> <p>However, i wonder about some things:</p> <ul> <li>Why has my first, directive based solution not worked properly?</li> <li>How can i accomplish my goal without using a form?</li> <li>Even with the working form solution, the second <code>console.log()</code> is triggered <em>before</em> the logging of the data. Why is this?</li> </ul>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload