<!DOCTYPE html>
<html>
<head>
<script src="js/angular.js"></script>
<script src="js/Script.js"></script>
</head>
<body ng-app="LoginPage" ng-controller = "LoginPageController">
<form action = "next.html" ng-submit="fun1($event)">
username : <input name = "username" ng-model="un">
<div>{{message1}}</div>
password : <input type = "password" name = "password" ng-model="pw">
<div>{{message2}}</div>
<input type = "submit" value = "login">
</form>
</body>
</html>我正在尝试使用AngularJS实现一个基本的登录页面，但是浏览器不显示Actuall Scope消息，而是将标签显示为{{Messages}}。
//creating a module
var loginPage = angular.module("LoginPage",[]);
//registering the above controller to the module
loginPage.controller("LoginPageController",function ($scope){
$scope.un = "";
$scope.pw = "";
$scope.message1="";
$scope.message2="";
$scope.fun1 = function(e){;
if($scope.un.length == 0){ //checking for length
$scope.message1 = "enter name"; //message 1
e.preventDefault();
}else{
$scope.message1=""; // message 2
}
if($scope.pw.length == 0){
$scope.message2 = "enter password";
e.preventDefault();
}else{
$scope.message2="";
}
}});Angular JS未正确包含在您的代码中。请正确添加。工作版本如下：
我只是更改了以下行：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
如果要使用Angular库的下载版本，请检查您的路径和文件名。
//creating a module
var loginPage = angular.module("LoginPage",[]);
//registering the above controller to the module
loginPage.controller("LoginPageController",function ($scope){
$scope.un = "";
$scope.pw = "";
$scope.message1="";
$scope.message2="";
$scope.fun1 = function(e){;
if($scope.un.length == 0){ //checking for length
$scope.message1 = "enter name"; //message 1
e.preventDefault();
}else{
$scope.message1=""; // message 2
}
if($scope.pw.length == 0){
$scope.message2 = "enter password";
e.preventDefault();
}else{
$scope.message2="";
}
}});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body ng-app="LoginPage" ng-controller = "LoginPageController">
<form action = "next.html" ng-submit="fun1($event)">
username : <input name = "username" ng-model="un">
<div>{{message1}}</div>
password : <input type = "password" name = "password" ng-model="pw">
<div>{{message2}}</div>
<input type = "submit" value = "login">
</form>
</body>
</html>