G:\PleskVhosts\stockarbiter.com\httpdocs\karimkameka/wp-content/themes/naya-lite/lib/css/custom-css.css is not writeable.
Copy the generated css from the text area below and paste it in the file above.



Submitting a Search by Pressing Enter with #AngularJS

Well I am well on my next chapter of AngularJS for my Stock application (Mogul Match Stocks) which follows the tenets of Rule #1, by Phil Town which I mentioned in my earlier post. BTW just to share a quick win with you, Rule #1 told be to buy Twitter before the huge run up on last Friday,  I was up 20% as of this writing!  Anyway back to the point of this piece.  In building the application I  was in need of a search function which would allow my users to search for a stock by typing in the first few letters of the company name or the first few letters of the ticker symbol.  In the design of site, as you can see in the screenshot below, I was in need of a search box in a few places.  AngularJS handles this scenario really well with directives!  After building out by site with the search boxes as I wanted I began to test.  During my testing of the solution I found my self hitting the enter key when I was done entering the letters for my query.  Of course, I had not told the form to submit for the search box  but only to submit when the little search icon was clicked.  This became annoying and I figured that I would implement as my users might want to do the same.

mms-Home

In my attempt to implement this I figured there was surely a built-in AngularJS directive out there that would allow me to achieve my task.  I wanted to be able to add a directive like “ng-Enter” to my HTML element and have that call my search function.  Well of course no such thing exists.  So in scouring the internet for a solution it became obvious to me that I needed to write an attribute directive to achieve what I needed.  What I ended up with was pretty elegant, in my opinion and should allow me (and hopefully you) to extend my input fields in the future.

Directive Definition

My directive binds to the ‘keypress’ event on the DOM then checks to ensure it’s the Enter key (code 13).  If so it then manipulates the DOM by finding the object with the “mms-Enter” attribute and evaluates the function passed to the element on the view. It then cancels any default behavior to ensure my function gets executed.  The code below is the entire directive definition.

(function () {
    angular.module('MogulMatchStocks').directive('mmsEnter', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                element.bind("keypress", function (event) {
                    if (event.which === 13) {
                        scope.$apply(function () {
                            scope.$eval(attrs.mmsEnter, { 'event': event });
                        });

                        event.preventDefault();
                    }
                });
            }
        }
    });
}());

Directive Usage

Now that we have our directive defined we can apply it where we need it.  I have the following HTML template in my view:

<div class="input-control text">
    <input type="text" ng-model="keywords" placeholder="Enter Symbol or Name" mms-enter="doSearch(keywords)"  />
    <button class="btn-search" ng-click="doSearch(keywords)"></button>
</div>

As you can see above I have my new directive added to my input element with the doSearch() method attached.  Now when users hit the enter key they are taken to the search results page which performs the search and displays the results.  Next step in the app is to add Authentication via Azure Mobile Services and implement a Watchlist feature to allow users to create and mange a Watchlist on the site. Once those features are in place the application will be published for you to play with!