Question

我正在遵循一个教程，我所做的一切都完全一样。在某个时候，我发现网站的行为与预期不符。

应该发生的事情是，无论我在搜索栏中输入的内容是什么，只要在标题两边加上括号，都会立即传递到{{title}}的位置。而是将其视为常规HTML文件，并仅在网页上显示{{title}}。

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

无论如何，WebStorm都会出现以下错误：

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

此处不允许使用属性应用。

我尝试将其更改为data-ng-app，它摆脱了错误，但不能解决问题。

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

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

基本上我到处都放ng...，说我不能放那里。

这是不符合预期的代码段。似乎只是忽略了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>

Answer 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>

无法通过控制器中的输入访问ng-model

1 个答案: