无法从控制器中的输入访问 ng-model答案

【问题标题】：Can't access ng-model from input in a controller无法从控制器中的输入访问 ng-model
【发布时间】：2019-05-20 08:37:12
【问题描述】：

我正在学习一个教程，我所做的一切都完全相同。在某些时候，我发现网站的行为与预期不符。

应该发生的是，当我在标题周围加上双括号时，我在搜索栏中输入的任何内容都会立即传递到{{title}} 的位置。但它会将其视为常规 HTML 文件，并在网页上简单地显示 {{title}}。

通常人们告诉我不要发布整个代码，因为它应该简洁，但是如果您看不到整个代码，您还能如何找到代码中的任何错误？

无论如何，在 WebStorm 中我都会收到以下错误：

<html lang="en" ng-app="ToDoApp">

此处不允许使用属性 ng app。

我尝试将其更改为data-ng-app，它消除了错误，但没有解决问题。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

然后对于这部分，它说没有本地数据。我不能真正下载它，因为我的磁盘空间不足。但是教授也没有下载它，它对他来说仍然很好用。

基本上我在任何地方都放了ng...，它说我不能放在那里。

这是未按预期运行的代码的 sn-p。它似乎只是忽略了ng-model。它还说输入需要标签，但这对教授来说又不是问题。

<div ng-controller="TodoListController">
                <input ng-model="title" class="form-control"/>

                {{title}}

以防万一这里是完整的 Angular index.html 文件：

<!DOCTYPE html>
<html lang="en" ng-app="ToDoApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="app.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="container">
    <h1> Todo List App </h1>


        <div ng-controller="TodoListController">
                <input ng-model="title" class="form-control"/>

                {{title}}


            <button class="btn btn-block btn-primary"> Add a todo </button>
            <ul class="list-group">
                <li class="list-group-item"> Pick up kids </li>
                <li class="list-group-item"> Pick up milk </li>
            </ul>
        </div>
    </div>
</body>
</html>

【问题讨论】：

你是在你的JS文件中声明一个控制器吗？在我的代码中一切正常：plnkr.co/edit/ZiC3oKvU20Pu5WCBxDdO?p=preview
是的，我做到了。问题出在控制器中。当我在 js 文件中出现语法错误时，我在 index.html 中崩溃了。

标签： javascript angularjs webstorm

【解决方案1】：

只要您不命名您的ng-app 并且不使用ng-controller，它就会一直有效。如果您使用ng-app="ToDoApp" 和控制器ng-controller="TodoListController"，您应该考虑在app.js 中声明您的应用，如下所示。

 var app = angular.module('ToDoApp', []);

app.controller('TodoListController', ["$scope", function($scope) {
}]);

完整代码如下

<!DOCTYPE html>
<html lang="en" ng-app="ToDoApp">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script>
        /**
            Scripting in html not recomnded use separate file
        */
        var app = angular.module('ToDoApp', []);
        app.controller('TodoListController', ["$scope", function ($scope) {
        }]);
    </script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <div class="container">
        <h1> Todo List App </h1>
        <div ng-controller="TodoListController">
            <input ng-model="title" class="form-control" />
            {{title}}
            <button class="btn btn-block btn-primary"> Add a todo </button>
            <ul class="list-group">
                <li class="list-group-item"> Pick up kids </li>
                <li class="list-group-item"> Pick up milk </li>
            </ul>
        </div>
    </div>
</body>

</html>

【讨论】：