Javascript范围在角度SPA应用程序中不起作用

时间:2016-02-10 12:45:14

标签: javascript html angularjs scope

所以我有这个角度SPA,index.html包含

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> 

所以我在已经包含javascript的index.html中注入了html和javascript。

登录文件就像​​

 <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>

我的问题是,在login.html文件中,它不会警告alert("hey, sup?");,因为它应该提醒用户名。

我猜javascript范围有问题,因为index.html中有一个,login.html中有一个。

如果我做一个简单的

,请在login.html
<button onclick="hey()"> Click </button>

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

我得到Uncaught ReferenceError: hey is not defined

那么javascript在这里有什么问题?我该如何解决这个问题?

由于

1 个答案:

答案 0 :(得分:0)

既然您正在使用角度,那么使用角度材料呢?

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>

使用角度你可以使用表单验证,基本的东西很容易在网上找到。 如果您需要向服务商提出请求,请使用google $ http作为基础知识。