javascript - AngularJS 模块分离无法正常工作-6ren

javascript - AngularJS 模块分离无法正常工作

转载作者：行者123 更新时间：2023-11-28 19:21:48

24

4

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

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

form = {"firstName":"John","lastName":"Doe"}master = {"firstName":"John","lastName":"Doe"}

当我运行我尝试的内容时，它会给出以下输出

表单 = {{user}}
大师= {{master}}

为什么会出现这样的情况呢？我也尝试将 angular.js 链接保留在顶部，但结果仍然是相同的..

最佳答案

首先，欢迎来到 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

关于javascript - AngularJS 模块分离无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28712623/

24

4

0

文章推荐： python - 创建包含多个 HTTP 请求的 mime/multipart 请求

文章推荐： javascript - d3 - 了解 d3.svg.line 的文档

文章推荐： iphone - 这个 UI 元素是什么？

jpa - 同一实体的多个表示正在合并、分离
我在尝试使用 jpa2.0 将包含持久实体和分离实体(新创建的实体)的实体列表更新到我的数据库中时遇到错误。我的实体包含在合并数据时出现错误(在标题中提到)的内部实体: Class supercla
java - 分离 JLayeredPane
我在分层 Pane 中有一组面板。我需要一个分隔符来将 sideBar 与 topBar 和 tabbedPanel 分开。我留了一个 10 像素的缓冲区来放置它。不幸的是，可能由于它是 JLayer
android - 分离 EditText
在我从数据库中读取的代码中，我还使用自定义适配器打印出每一行，该行中有一个 texttview、2 个按钮和一个 edittext。这一切都很好，但是当按下按钮时，edittext 会递增或递减，有没
java - 分离/逐出具有非持久化子对象的对象树
我有一个由 Hibernate 4.3.4 管理的实体，它有一个其他实体的一对多集合。在我的处理过程中，我必须分离父实体(将分离级联到子列表)。但是，当我向列表中添加一个尚未持久化的新项目并执行分离
javascript - 确保附加行始终是动态创建的行组成的表中的最后一行。。分离()
我想追加一行，该行应该是表格的最后一行。在我的代码中，它似乎在第一次动态添加行时起作用。但是当添加其他行时它不会成为最后一行。我总是希望“subtot”行成为最后一行，但是当我追加其他行时，它不
html - 分离 Div
我试图用它们之间的空格分隔这 2 个 div(请参见图 1)。问题是当我添加边距或填充时会发生这种情况(请参见图 2)。这是我的代码，请注意我没有使用 Bootstrap: .row { mar
c# - 如何检测远程参与者断开连接(分离)？
我的服务器包含一些 ServerActor。该 actor 接收 RegisterClient 消息并将 ActorRefs 添加到已注册客户端列表中。我还有多个客户端，每个客户端都包含 Clien
Clojure:分离 comp 和部分参数
假设我有一个需要两个参数的函数，并且参数的顺序会影响结果。是否可以将第一个参数传递给 partial 或 comp 函数，然后将另一个参数传递给它，如下所示: (defn bar [arg1 arg
clojure - 分离 map 的多个后代键？
如何搜索和分离多个后代键。例子: (def d {:foo 123 :bar { :baz 456 :bam { :w
scala - Slick:动态创建查询连接/分离
我正在尝试为 Slick 表创建一个类型安全的动态 DSL，但不确定如何实现这一点。用户可以通过以 form/json 格式发送过滤器来将过滤器发布到服务器，我需要使用所有这些来构建一个 Slick
Reactjs 分离 UI 和业务逻辑
我是新来的，我发现看到充满大量函数和变量初始化以及 UI 的组件时眼睛很痛。是否可以将它们分开？而不是默认设置，如下所示。如何将业务逻辑分离到另一个文件中？ function MyComponent
r - 传递一个字符 arg。分离
我试图通过将参数粘贴在一起来使用分离。这应该是一件容易的工作，但不适合我。当我想到使用 eval(parse()) 时，我知道是时候寻求帮助了通常，如果我加载一个包，我可以按如下方式分离它: det
clojure - 与 pred 分离
(dissoc :a m)允许我解除给定的键。但是，有没有办法使用谓词函数来分离 pred 为真的任何键？ (dissoc-with-pred pred? m) 所以给了一张 map - {:a 2
r - 分离 R 包以升级它的可靠过程是什么？
我编写了一个使用 devtools 来包含内部数据的包: devtools::use_data(.data, internal = T, overwrite = T) 我最近更改了该数据并重建了包。我
terminal - 运行脚本时 tmux 分离
所以我有一个脚本，我想在我的服务器上运行它而不会打扰我。所以我想我会在 tmux 窗口中运行服务器，然后 detach这样我就可以简单地 attach如果我想查看进度(此脚本需要数天才能运行)。但是
javascript - 分离 ThreeJS 模型和动画数据
ThreeJS中动画数据和模型数据是否可以解耦？这样就可以交换模型并保留动画？我认为这可能非常强大我知道如何在 ThreeJS 中做到这一点的方法是将每个动画一个接一个地打包在一个模型中，这似乎是
docker - 分离 Docker 文件和应用程序源文件以优化生产环境
我有一堆(Ruby)脚本存储在服务器上。到目前为止，我的团队通过打开一个启动脚本名称列表的访问器应用程序来使用它们，然后他们在工作文件夹中的文件上选择要在该实例中运行的脚本。脚本直接从服务器运行，因此
javascript - 分离 Javascript 函数
我想知道 javascript 如何包含在 jsp 中 - 我们是否可以在 .js 文件中放置 jsp 能够识别的任何代码，而不仅仅是 javascript 代码？我有一些常见的 JavaScrip
默认为后台运行的 Dockerfile 选项(分离)
您是否可以在 Dockerfile 中指定一个选项，默认使用它构建的容器以分离方式运行。这将导致与 -d 相同的结果: docker run -d 这样 docker run 默认情况下会分离运
Java:分离 JAR 版本
我正在为现有的 Java 程序开发 Java 插件。现有程序使用特定版本的 eclipse.uml2.*，我的插件也是如此。不幸的是，我的插件需要更新版本。为了运行该插件，我需要将其导出到 Jar

首页

博学

6Ren·AI

商城

javascript - AngularJS 模块分离无法正常工作