Angular: ng-include Javascript not being executed

I'm in a refactoring mood, so I've moved all my login controller stuff out of Autenticate.html and into HTML templates. It was all working before the move but now the Javascript I am using is not being called. I have Javascript like this:

login.js

$(function () {
    $("#userNameInput").keypress(function (e) {
        if (e.keyCode === 13) $("#passwordInput").focus();
    });

    $("#passwordInput").keypress(function (e) {
        if (e.keyCode === 13) $("#loginButton").click();
    });
});

Open in new window


Authenticate.html

<!DOCTYPE html>
<html ng-app="iBOSModule">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" /><base href="/">
    <title>Welcome to iBOS</title>
    <script src="/Scripts/angular.min.js"></script>
    <script src="/Scripts/angular-route.min.js"></script>
    <script src="/Scripts/promise-tracker.js"></script>
    <script src="/Scripts/angular-busy.min.js"></script>
    <script src="/Scripts/http-interceptor.js"></script>
    <script src="/Scripts/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <script src="/Scripts/angular-animate.min.js"></script>
    <script src="/Scripts/dirPagination.js"></script>
    <script src="/Scripts/linq.js"></script>
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/angular/components/login/scripts/login.js"></script>
    <script src="/angular/components/shared/scripts/app.js"></script>
    <script src="/angular/components/login/controllers/login.js"></script>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="/Content/acs.css" rel="stylesheet"/>
</head>
<body style="background-image: url(/Content/Images/Jet-Above-The-Clouds.jpg);" ng-cloak>
<div class="container body-content top-buffer">
    <ng-include src="'/angular/components/login/templates/login-template.html'"></ng-include>
</div>
</body>
</html>

Open in new window


login-template.html

<div class="well center-block" style="max-width: 489px;" ng-controller="LoginCtrl">
    <div class="container">
        <div class="row">
            <img src="/Content/Images/ibos_logo.png" class="img-responsive" />
        </div>
        <div class="row col-sm-10 col-sm-offset-1 top-buffer remove-bottom-buffer" ng-show="hasFailed()">
            <div class="alert alert-danger" role="alert">
                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                <span class="sr-only">Error:</span>
                Invalid credentials. Please try again.
            </div>
        </div>
        <div class="row col-sm-10 col-sm-offset-1 top-buffer remove-bottom-buffer" ng-show="hasFault()">
            <div class="alert alert-danger" role="alert">
                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                <span class="sr-only">Error:</span>
                An error occurred.
            </div>
        </div>
        <div class="row col-sm-10 col-sm-offset-1 top-buffer">
            <input ng-model="userName" type="text" class="form-control" placeholder="User Name" ng-disabled="isAuthenticating()" id="userNameInput" tabindex="0">
        </div>
        <div class="row col-sm-10 col-sm-offset-1 top-buffer">
            <input ng-model="password" type="password" class="form-control" placeholder="Password" ng-disabled="isAuthenticating()" id="passwordInput" tabindex="1">
        </div>
        <div class="row col-sm-10 col-sm-offset-1 top-buffer">
            <button id="loginButton" class="btn btn-default pull-right" ng-hide="isAuthenticating()" ng-click="authenticate()" tabindex="2">Login</button>
            <button id="loadingButton" class="btn btn-default pull-right disabled" ng-show="isAuthenticating()"><img src="/Content/Images/ajax-loader.gif" /></button>
        </div>
    </div>
</div>

Open in new window



The problem is that the Javascript is not being called when the key press events are fired. The actual bindings are happening - I checked in F12 and the binding function is being called. The inner functions, however, are not being called.

Nothing else has changed. Why are the functions not being called?
mark_norgateAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ioannis ParaskevopoulosCommented:
I think the best way to proceed would be to add a directive i your code:

To declare the directive:


module.directive('login', function () {
    return {
        restrict: 'E', // this defines that you should use an element as the directive in your html code
        replace: true, // this will replace the element you add in your body with the contents of login-template.html
        templateUrl: '/angular/components/login/templates/login-template.html',
        scope: false, // this will make it use the parent scope
        link: function (scope, element, attrs) {
            $("#userNameInput").keypress(function (e) {
                if (e.keyCode === 13) $("#passwordInput").focus();
            });

           $("#passwordInput").keypress(function (e) {
               if (e.keyCode === 13) $("#loginButton").click();
           });
            
        }
    };
});

Open in new window


Now replace ng-include with:

<login></login>

Open in new window


Giannis

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mark_norgateAuthor Commented:
Absolutely fabulous, that works a treat, thank you. I have always been a bit scared of writing directives so this is a really good start. Thanks again!

Mark
mark_norgateAuthor Commented:
A perfect answer.
Ioannis ParaskevopoulosCommented:
Glad to help.

Keep in mind that directives is a perfect way of creating reusable "controls".

It needs a bit messing arround with them in order to getting used to the kind of scope you will need or how to communicate between dorectives, but after a while, and after seeing how easily you may reuse them, you won't be able to do anything without them.

Giannis
mark_norgateAuthor Commented:
Yes, I am into the swing of them now I think. I have absorbed all the documentation and am ready to fly! I want to write a validation library as directives because I'm not happy with any of the Angular validation stuff I've come across.

Mark
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.