为什么我的控制器显示 {{message}}，而不是实际配置的消息答案

【问题标题】：Why does my controller displays {{message}}, like this instead of actual configured message为什么我的控制器显示 {{message}}，而不是实际配置的消息
【发布时间】：2018-02-25 17:12:24
【问题描述】：

<!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 实现基本登录页面，但是浏览器不显示实际范围消息，而是将标签显示为 {{message}}。

//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="";
		
	}
}});

【问题讨论】：

您的 html 页面在哪里？请添加您的查看页面。
某些事情会导致 Angular 抛出异常或根本无法成功引导。请包括在开发者控制台中显示的任何错误。
另外，$scope.fun1 = function(e){; 末尾的分号是被复制到 Stack Overflow 还是像你的代码一样？如果是后一种情况，那是你的错误。
谢谢大家，我遇到了问题...问题出在模块和控制器的声明中，我放了“LoginPage”，而不是“LogInPage”，...应该是单引号而不是比两倍。

标签： javascript angularjs angularjs-directive

【解决方案1】：

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>

【讨论】：