我是角js的新手,我刚开始学习它。我一直在学习w3schools教程,而且我被困在表格部分。原因如下:
教程中给出的代码如下所示,它可以正常工作:
<div ng-app="" ng-controller="formController">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
function formController ($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
};
</script>
但我正在尝试的是模块的分离,如其中一个tutorail所示,但这根本不起作用。以下是我的尝试。
<!DOCTYPE html>
<head>
<title>
Angular JS
</title>
</head>
<script src="Scripts/angular.min.js"></script>
<body>
<div data-ng-app="myApp" data-ng-controller="formController">
<form novalidate>
<table>
<tr>
<td>
First Name :
</td>
<td>
<input type="text" data-ng-model="user.firstName">
</td>
</tr>
<tr>
<td>
Last Name :
</td>
<td>
<input type="text" data-ng-model="user.lastName">
</td>
</tr>
<tr>
<button data-ng-click="reset()">Reset</button>
</tr>
</table>
</form>
<table>
<tr>
<td>
form = {{user}}
</td>
</tr>
<tr>
<td>
master= {{master}}
</tr>
</tr>
</table>
</div>
<script src="Scripts/myApp.js"></script>
<script src="Scripts/myCtrl.js"></script>
</body>
</html>
myCtrl.js 包含以下代码
app.controller("myCtrl",function($scope)
{
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
app.controller("formController",function($scope)
{
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
和 myApp.js 如下:
var app=angular.module("myApp",[]);
但是当我尝试教程代码时,它会给我以下输出
form = {&#34; firstName&#34;:&#34; John&#34;,&#34; lastName&#34;:&#34; Doe&#34;} master = {&#34; firstName&#34;:&#34; John&#34;,&#34; lastName&#34;:&#34; Doe&#34;}
当我运行我尝试过的时候会给出以下输出
form = {{user}}
master = {{master}}
为什么会这样?我也试过在顶部保持angular.js链接,但结果仍然相同..
答案 0 :(得分:2)
首先,欢迎来到Angular开发者社区!
第一步: 不要使用IE进行开发。试试Chrome或Firefox。
第二步: 您的HTML和js几乎没有错误。例如:
<table>
<tr>
<td>
form = {{user}}
</td>
</tr>
<tr>
<td>
master= {{master}}
</tr> <--- need to be </td>
</tr>
</table>
我为你创建了一个plunkr,所有的小错误都已修复(你可以比较你的代码和我的代码)。 Chrome上的一切正常。我无法检查IE,因为根本没有。
如果你还想使用IE8 ,你可以捕捉到这样的错误:
<script type="text/javascript">
window.onerror = function(msg, url, line, col, error) {
// Note that col & error are new to the HTML 5 spec and may not be
// supported in every browser. It worked for me in Chrome.
var extra = !col ? '' : '\ncolumn: ' + col;
extra += !error ? '' : '\nerror: ' + error;
// You can view the information in an alert to see things working like this:
alert("Error: " + msg + "\nurl: " + url + "\nline: " + line + extra);
// TODO: Report this error via ajax so you can keep track
// of what pages have JS issues
var suppressErrorAlert = true;
// If you return true, then error alerts (like in older versions of
// Internet Explorer) will be suppressed.
return suppressErrorAlert;
};
</script>
但是您需要将该代码放在HTML中的所有其他脚本之前。
的代码示例答案 1 :(得分:1)
当角度似乎被破坏时,例如你看到{{ curly brackets }}
而不是任何渲染,很可能意味着引擎崩溃了。
当发生这种情况时,您需要查找错误是什么。它们显示在您的开发者控制台中。
以下是如何使用Google Chrome打开它,以及使用Firefox(或者只是谷歌“dev console 浏览器”用于任何其他浏览器)。
然后在此处粘贴错误,以便我们帮助您理解并修复错误。