0

我是 Angular 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>

但是我正在尝试的是分离模块，如他们的教程之一所示，但这根本不起作用。以下是我尝试过的。

<!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",[]);

但是当我尝试教程代码时，它给了我下面的输出

形式 = {"firstName":"John","lastName":"Doe"} 主 = {"firstName":"John","lastName":"Doe"}

当我运行我尝试过的东西时，它会给出以下输出

表单 = {{用户}}
主 = {{主}}

为什么会这样？我也尝试过将 angular.js 链接保持在顶部，但结果仍然相同..

4

2 回答 2

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 中的所有其他脚本之前。

取自该 SO 问题的代码示例

于 2015-02-25T07:06:43.623 回答
1

当角度似乎被破坏时，例如，您看到的{{ curly brackets }}不是任何渲染，很可能意味着引擎崩溃了。

发生这种情况时，您需要查找错误所在。它们显示在您的开发者控制台中。

这是使用Google Chrome打开它的方法，这里是使用Firefox（或者只是谷歌“开发控制台浏览器”对于任何其他浏览器）。

然后将错误粘贴到此处，以便我们帮助您理解并修复它。

于 2015-02-25T06:34:11.870 回答