AngularJS模块分离无法正常工作

时间:2015-02-25 06:29:28

标签: javascript angularjs model-view-controller angularjs-module

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

2 个答案:

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

取自that SO question

的代码示例

答案 1 :(得分:1)

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

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

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

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