Не могу получить доступ к ng-модели из ввода в контроллере

Я следовал за учебником, и я сделал все точно так же. В какой-то момент я попал туда, где поведение сайта было не таким, как задумано.

Предполагается, что когда я ставлю двойные скобки вокруг заголовка, все, что я печатаю в строке поиска, немедленно передается в местоположение {{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>
Источник

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>
Источник
Другие вопросы по тегам