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

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

0 голосов
/ 19 декабря 2018

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

То, что должно произойти, это когда я ставлю двойные скобки вокруг заголовка, все, что я печатаю в строке поиска, немедленно передается в местоположение{{title}}.Но вместо этого он обрабатывает его как обычный HTML-файл и просто показывает {{title}} на веб-странице.

Обычно люди говорят мне не публиковать весь код, потому что он должен быть кратким, но как еще вы могли бынайти какие-либо ошибки в коде, если вы не можете увидеть весь код?

В любом случае в WebStorm я получаю следующие ошибки: 

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

Атрибут Приложение ng здесь не разрешено.

Я попытался изменить его на 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 Ответ

0 голосов
/ 19 декабря 2018

Он всегда будет работать, пока вы не назовете свой ng-app и не используете ng-controller.Если вы используете ng-app="ToDoApp" и Controller 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>
...