Angular нг-модель и контроллер не будут работать - PullRequest
Новая
       22

Angular нг-модель и контроллер не будут работать

0 голосов
/ 09 января 2020

Я довольно новичок в Angular, и я пытаюсь использовать ng-model и ng-controller, чтобы изменить какой-либо текст с помощью поля ввода.

Эта проблема в том, что мой первоначальный текст (Джон) не отображается на странице. Каждый урок говорит, что это способ сделать это. Я пропускаю какой-то импорт или объявление где-то в component.ts?

Вот мой код. 

var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope){
    $scope.firstName = "john";
});
<div ng-app="myApp" ng-controller="myCtrl">

    <h1>{{firstName}}</h1>
    Name: <input ng-model="firstName">
    
</div>

Ответы [ 4 ]

0 голосов
/ 11 января 2020

Вы не пропустили ни одного объявления, но проблема может заключаться в том, что вы не включили angular и свой код в html. Попробуйте это: 

    <html>
    <head></head>
    <body ng-app="myApp">

    <div ng-controller="myCtrl">
        <h1>{{firstName}}</h1>
        Name: <input ng-model="firstName">
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <script src="./component.ts"></script> <!--your component file location-->
    </body>
    </html>
0 голосов
/ 09 января 2020

Вы забыли ввести $scope в свой контроллер. 

myApp.controller('myCtrl', ['$scope', function($scope) {
  $scope.firstName = 'john';
}]);

Любую зависимость (службы, фильтры ..), которую вы хотите иметь в контроллере, вы должны внедрить.

0 голосов
/ 10 января 2020

Добавить библиотеку angular.js как элемент <script>: 

var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope){
    $scope.firstName = "john";
});
<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

    <h1>{{firstName}}</h1>
    Name: <input ng-model="firstName">
    
</div>
0 голосов
/ 09 января 2020

Я не понимаю, где вы включаете angular хотя. Добавьте это в свой код.

Пример: 

    <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

    <h1>{{firstName}}</h1>
    Name: <input ng-model="firstName">

</div>

<script>
    var app = angular.module('myApp', [])
    app.controller('myCtrl', function($scope){
        $scope.firstName = "johns";
    });
</script>
</body>
</html>
...