Почему мой ng-контроллер не называется?

Я пытаюсь следовать учебнику, чтобы познакомиться с Угловым. Поэтому, если эти вопросы невероятно просты, я заранее извиняюсь. В моем index.html я пытаюсь вызвать один из контроллеров, чтобы проверить, как Angular вызывает определенные вещи.Почему мой ng-контроллер не называется?

В коде у меня есть <div ng-controller="listCtrl">. Однако, что-то простое, как {{3+5}}, не оценивается и печатается на странице как есть. Я пытался возиться с атрибутом ng и когда у меня есть что-то вроде

<div ng-app=""> 
    {{3+5}} 
</div>

он будет работать и распечатать 8. Мне было интересно, если кто-то может взглянуть на код (публикуемую ниже) и скажите мне, что я делаю неправильно.

Мой index.html файл:

<!doctype html> 
<html lang="en" ng-app="turtleFacts"> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
     integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
     crossorigin="anonymous"></script> 

</head> 
<body> 
<div class="container"> 
    <div class="page-header"> 
     <h1>Heading</h1> 
     <h3>Heading3 
     <strong>QUIZ</strong> 
     </h3> 
</div> 

<div ng-controller="listCtrl"> 
    {{dummyData}} 
</div> 

</div> 

<!-- My application scripts --> 
<script src="js/app.js"></script> 
<script src="js/controllers/list.js"></script> 

</body> 
</html>

Мои list.js:

(function(){ 
    angular 
     .module("turtleFacts") 
     .controller("listCtrl", ListController); 

    function ListController($scope) { 
     $scope.dummyData = "hello world"; 
    } 
})

И мой app.js:

(function() { 
    angular 
     .module("turtleFacts", []); 
})();

Моя структура папок выглядит следующим образом:

Project 
| 
+-- css 
|  
+-- js 
| | 
| +-- controllers 
| | | 
| | +-- list.js 
| | 
| +-- app.js 
|  
+-- index.html

Это мое предположение, что страница должна иметь «Hello World», но все, что я получаю, это {{dummyData}}. Пожалуйста, дайте мне знать, если есть какая-либо другая информация, которую я могу предоставить, которая вам может понадобиться. Благодаря!

источник

2016-10-26 akpersad

Любые ошибки в консоли? FYI, если вы собираетесь использовать jQuery с Angular (не рекомендуется), вы должны сначала включить jQuery – Phil

@Phil Я получаю 'Argument 'listCtrl' не является функцией, получившей undefined', который, я думаю, является корнем проблемы. Не понимаю, почему это не называется. Также спасибо за отзыв о jQuery/Angular. – akpersad

Я думаю, * возможно *, ваш app.js работает после list.js. С аргументом '[]' этот вызов стирает модуль и воссоздает его. Это приведет к стиранию регистрации контроллера. – Amy

В list.js, вы забыли добавить (); в конце вашего IIFE :)

источник

2016-10-26 03:46:21 elfan

Большое спасибо! Оно работает! – akpersad

Почему мой ng-контроллер не называется?

ответ

Смежные вопросы