Question

我是角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链接，但结果仍然相同..

Answer 1

首先，欢迎来到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中的所有其他脚本之前。

取自that SO question

的代码示例

Answer 2

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

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

以下是如何使用Google Chrome打开它，以及使用Firefox（或者只是谷歌“dev console 浏览器”用于任何其他浏览器）。

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

AngularJS模块分离无法正常工作

2 个答案: