Javascript scope does not work in angular SPA app

Question

So I have this angular SPA, the index.html contains

var app = angular.module('app', ['ngRoute']);   



        app.config(function ($routeProvider , $locationProvider) {         
            $routeProvider                                     
            .when('/', {                      
               templateUrl: 'home.html',                         
               controller: 'homeController'                    
           })                    
            .when('/login', {                     
               templateUrl: 'login.html',                        
               controller: 'loginController'                    
           })                    
     }); 


    app.controller('homeController', function ($scope) {            
            $scope.message = 'Welcome';        
    }); 

    app.controller('loginController', function ($scope) {            
            $scope.message = 'Login';            
    }); 



  <div ng-view></div>

So I inject html and javascript inside the index.html that already contains javascript.

The login file is like

 <p>{{ message }}</p>

    <form >

            <input type="text"  id="username" name="username">

            <input type="password" id="password" name="password">        

            <button type="submit" id="login"> Login </button>
    </form>       

    <script type="text/javascript">         

    document.getElementById("login").onclick = handleButtonPress;

    function handleButtonPress(e) {
        e.preventDefault();
        alert("hey, sup?");

        var form = document.getElementById("loginform");
        var formData = new FormData(form);

        var j = JSON.stringify(formData);

        alert(" formData  > " + j.username);    
      }
    </script>

My problem is , inside the login.html file it does not alert the alert("hey, sup?");as it should and it does not alert the username.

I guess is something wrong with the javascript scope, because there is one in the index.html and one in the login.html.

Inside the login.html if I do a simple

<button onclick="hey()"> Click </button>

function hey(){    
    alert("hey");    
}

I get Uncaught ReferenceError: hey is not defined.

So what is the problem with javascript here and how can I solve this ?

Thanks

Always be sure to check the JavaScript console for errors when doing web development. — T.J. Crowder, Feb 10 '16 at 12:50
@AravindSivam I forgot to paste it it on SO, in my code is there. I fixed it also in the SO. Still not fixing my problem — slevin, Feb 10 '16 at 13:00
You can't read data out of a `FormData` object … and when you convert something to a JSON string then it is a **string** and won't have a `username` property! — Quentin, Feb 10 '16 at 13:01
@Quentin Thanks. But, since a button is just clicked, it should at least do the simplest thing and alert the ` alert("hey, sup?");` — slevin, Feb 10 '16 at 13:05

score 0 · Answer 1 · answered Feb 10 '16 at 12:58

0

Since you're using angular, what about using angular stuff for this ?

app.controller('loginController', function ($scope) {            
        $scope.message = 'Login'; 
        $scope.loginData = {};
        $scope.hey = function(){
            alert('hey '+$scope.loginData.username);
        }           
}); 

<input type="text"  id="username" name="username" ng-model = "login.Data.username">
<input type="password" id="password" name="password" ng-model="loginData.password">       
<button type="submit" id="login" ng-click="hey()"> Login </button>

With angular you can use form validation, basic stuff is really easy to find on the net. If you need to do request to the serveur, google $http for the basics.

answered Feb 10 '16 at 12:58

Walfrat

5,250
13
33

You are right, but my problem is that inside the `login.html` , javascript cannot perform a simple alert after a button clicked. I would like to fix my javascript in any case, either I manipulate my form with angular or not. Thanks – slevin Feb 10 '16 at 13:04
This is probably because your DOM is not yet loaded, wrapped your javascript as the accepted answer here : http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the However i warn you, mixing raw js and angular isn't a good idea if you don't know the basics of angular :) – Walfrat Feb 10 '16 at 13:12

Javascript scope does not work in angular SPA app

1 Answers1