Получение ошибки - «Аргумент« myCtrl »не является функцией, получил неопределенное значение»

Question

Получение ошибки - «Аргумент« myCtrl »не является функцией, получил неопределенное значение»

0

Невозможно выяснить, где я делаю ошибку. Пробовал следовать этому без везения - Как найти причину AngularJS "Аргумент" MyCtrl "не является функцией, получившей неопределенное значение"

Вот мой файл index.html -

<!DOCTYPE>
<html ng-app="myApp">
<head><title>Angular JS table sort and filter example </title>  
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">  
   <script src="http://code.angularjs.org/1.3.12/angular.js"></script>  
   <script src="http://code.angularjs.org/1.3.12/angular-resource.js"></script>  
   <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>   
   <style>  
     .odd {  
       background-color: antiquewhite;  
       color: #008b8b;  
     }  
     td th {  
       height: 30px;  
       min-width: 100px;  
     }  
     thead {  
       background-color: darkgray;  
       color: white;  
       height: 30px;  
     }  
   </style>  
 </head>  
</head>
<body ng-app="myApp">  
   <div ng-controller="myCtrl"> 
     <h3>List students</h3>  
     <div class="container-fluid">  
       <pre>Click header link to sort, input into filter text to filter</pre>  
       <hr />  
       <table class="table table-striped">  
         <thead>  
           <tr>  
             <th>  
               <a href="" ng-click="order('name')">Name</a>  
             </th>  
             <th><a href="" ng-click="order('age')"> Age</a> </th>  
             <th><a href="" ng-click="order('gender')">Gender</a> </th>  
           </tr>  
         </thead>  
         <tbody>  
           <tr>  
             <td> <input type="text" ng-model="search.name" /></td>  
             <td> <input type="text" ng-model="search.age" /> </td>  
             <td><input type="text" ng-model="search.gender" /> </td>  
           </tr>  
           <tr ng-repeat="user in students | orderBy:predicate:reverse | filter:paginate| filter:search" ng-class-odd="'odd'">  
             <td>{{user.name}}</td>  
             <td>{{user.age}}</td>  
             <td>{{user.gender}}</td>  
           </tr>  
         </tbody>  
       </table>  
       <pagination total-items="totalItems" ng-model="currentPage"  
             max-size="5" boundary-links="true"  
             items-per-page="numPerPage" class="pagination-sm">  
       </pagination>  
     </div>  
   </div>  
<script src="controllers/controller.js"></script>
</body>
</html>

Файл controller.js -

var app = angular.module('myApp',['ui.bootstrap', 'ngResource']);  
     app.controller('myCtrl', function ($scope) {  
       $scope.predicate = 'name';  
       $scope.reverse = true;  
       $scope.currentPage = 1;  
       $scope.order = function (predicate) {  
         $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;  
         $scope.predicate = predicate;  
       };  
       $scope.students = [  
         { name: 'Kevin', age: 25, gender: 'boy' },  
         { name: 'John', age: 30, gender: 'girl' },  
         { name: 'Laura', age: 28, gender: 'girl' },  
         { name: 'Joy', age: 15, gender: 'girl' },  
         { name: 'Mary', age: 28, gender: 'girl' },  
         { name: 'Peter', age: 95, gender: 'boy' },  
         { name: 'Bob', age: 50, gender: 'boy' },  
         { name: 'Erika', age: 27, gender: 'girl' },  
         { name: 'Patrick', age: 40, gender: 'boy' },  
         { name: 'Tery', age: 60, gender: 'girl' }  
       ];  
       $scope.totalItems = $scope.students.length;  
       $scope.numPerPage = 5;  
       $scope.paginate = function (value) {  
         var begin, end, index;  
         begin = ($scope.currentPage - 1) * $scope.numPerPage;  
         end = begin + $scope.numPerPage;  
         index = $scope.students.indexOf(value);  
         return (begin <= index && index < end);  
       };  
     });

inCode 02 нояб. 2015, в 14:03

Источник

0

Функция конструктора контроллера должна передаваться в массиве app.controller('myCtrl', ['$scope', function($scope) { //your controller code here}]);
Andrew 02 нояб. 2015, в 12:51
0

Не сработало - Вот как выглядит controller.js сейчас. Я сделал ошибку? var app = angular.module ('myApp', ['ui.bootstrap', 'ngResource']); app.controller ('myCtrl', ['$ scope', function ($ scope) {// код mycontroller здесь}]);
inCode 02 нояб. 2015, в 13:04
0

как ни странно, код, кажется, работает хорошо локально. Я заметил, что в вашем html объявлено 2 ng-app . вам может понадобиться только один.
danielepolencic 02 нояб. 2015, в 13:37
0

Я согласен с @danielepolencic - попробуйте удалить второй атрибут ng-app из вашего тега body , оставьте только с тегом html
Andrew 02 нояб. 2015, в 14:11
0

Это сработало - @danielepolencic - Советы от Андрея плюс вы исправили ошибку. Прошлой ночью я не мог спать столько, сколько хотел, как это было в моей голове. Спасибо!
inCode 02 нояб. 2015, в 15:54
0

@Andrew Андрей - Спасибо!
inCode 02 нояб. 2015, в 15:57

Показать ещё 4 комментария

Теги:

javascript

jquery

angularjs

mean-stack

2 ответа

2

Функция конструктора контроллера должна передаваться в массиве

app.controller('myCtrl', ['$scope', function($scope) {//your controller code here } ]);

Andrew 02 нояб. 2015, в 11:24

Ещё вопросы

Функция конструктора контроллера должна передаваться в массиве app.controller('myCtrl', ['$scope', function($scope) { //your controller code here}]);
Не сработало - Вот как выглядит controller.js сейчас. Я сделал ошибку? var app = angular.module ('myApp', ['ui.bootstrap', 'ngResource']); app.controller ('myCtrl', ['$ scope', function ($ scope) {// код mycontroller здесь}]);
как ни странно, код, кажется, работает хорошо локально. Я заметил, что в вашем html объявлено 2 ng-app . вам может понадобиться только один.
Я согласен с @danielepolencic - попробуйте удалить второй атрибут ng-app из вашего тега body , оставьте только с тегом html
Это сработало - @danielepolencic - Советы от Андрея плюс вы исправили ошибку. Прошлой ночью я не мог спать столько, сколько хотел, как это было в моей голове. Спасибо!

danielepolencic · Accepted Answer · 2015-11-02T12-42-00.000Z

Ошибка связана с тем, как приложение инициализируется, и двойным ng-app. Вы можете легко убедиться, что при начальной загрузке angularjs вручную:

Когда вы удалите оба ng-app и добавьте следующий сниппт внизу в controllers/controller.js, ваш скрипт работает:

angular.element(document).ready(function() { angular.bootstrap(document, ['myApp']); });

В дополнение к этому мне также пришлось применить изменения, упомянутые Андреем в его ответе.