Lỗi AngularJS: 'đối số' FirstCtrl 'không phải là một hàm, không được xác định'

93

Tôi nhận thấy câu hỏi tương tự đã được hỏi một vài lần ở đây, tôi đã cố gắng giải quyết nó nhưng không giúp được gì.

Tôi đang làm theo hướng dẫn này với các video về đầu trứng.

Nhưng khi tôi vào phần Bộ điều khiển và Chia sẻ dữ liệu giữa các bộ điều khiển, tôi không thể làm cho nó hoạt động được.

Khi tôi chạy nó với Chrome, tôi gặp lỗi này trong bảng điều khiển:

'đối số' FirstCtrl 'không phải là một hàm, không được xác định'.

Tôi thực sự không biết có chuyện gì. Mã giống như trong hướng dẫn.

HTML

<!DOCTYPE html>
<html ng-app>
 <head>
    <title>AngularJS Tutorials: Controllers</title>
    <link rel="stylesheet" href="mystyle.css">
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
 </head>
 <body>
    <div ng-app="">
       <div ng-controller="FirstCtrl">   
           <h1> {{data.message + " world"}}</h1>

           <div class="{{data.message}}">
               Wrap me in a foundation component
           </div>
       </div>
    </div>
    <script type="text/javascript" src="main.js"></script>
 </body>
</html>

main.js

function FirstCtrl($scope){
   $scope.data = { message: "Hello" };
}

javascript angularjs

— Pumba
nguồn

Dưới đây là giải pháp trong các ý kiến thứ hai - stackoverflow.com/questions/24894870/...

— Kanchan

108

Bạn có 2 ng-appchỉ thị không tên trong html của mình.
Mất một trong những div của bạn.

Cập nhật
Hãy thử một cách tiếp cận khác.
Xác định một mô-đun trong tệp js của bạn và gán ng-appchỉ thị cho nó. Sau đó, xác định bộ điều khiển giống như một thành phần, không phải như một chức năng đơn giản:

<div ng-app="myAppName">  
<!-- or what's the root node of your angular app -->

và phần js:

angular.module('myAppName', [])
    .controller('FirstCtrl', function($scope) {
         $scope.data = {message: 'Hello'};
    });

Đây là một bản demo trực tuyến đang hoạt động như vậy: http://jsfiddle.net/FssbL/1/

— gion_13
nguồn

Cảm ơn rất nhiều vì câu trả lời, thật đáng buồn là tôi vẫn gặp lỗi tương tự .. Vì vậy, tôi đã mất ng-app = "" từ div, nhưng nó vẫn không hoạt động.

— Pumba

1

Cảm ơn rất nhiều vì sự giúp đỡ của bạn! Tôi không hiểu nó nữa, tôi đã làm điều tương tự như bạn đã hiển thị ở đây và trong bản demo trực tuyến nhưng nó vẫn nói 'FirstCtrl' là không xác định. Tôi sẽ thử lại từ đầu, hy vọng rằng tôi sẽ làm được việc, vì trong các hướng dẫn tiếp theo tôi cũng gặp phải vấn đề tương tự.

— Pumba

Tuyệt quá!! Nó hoạt động. Tôi quên đóng thuộc tính type trên thẻ script cho tệp js. Và điều đó kết hợp với giải pháp thứ hai của bạn đã làm cho nó hoạt động! Cảm ơn bạn rất nhiều :))

— Pumba 17/10/13

6

Video giới thiệu không quấn bộ điều khiển trong mô-đun. Vậy tại sao nó hiệu quả với anh ta, mà không phải tôi? egghead.io/lessons/angularjs-controllers

— Demodave

2

@Demodave, tôi có cùng một câu hỏi. Tôi cho rằng các video được quay trong phiên bản AngularJS trước đó và do đó việc xác định bộ điều khiển có khả năng ít nghiêm ngặt hơn (nhưng, đó chỉ là giả định của tôi, tôi rất vui khi ai đó xác nhận hoặc từ chối)

— MandM

93

Tôi nhận được chính xác thông báo lỗi tương tự và trong trường hợp của tôi, hóa ra tôi đã không liệt kê tệp JS bộ điều khiển (ví dụ: first-ctrl.js) trong index.html của mình

— Mariusz
nguồn

1

Ý bạn là gì khi bạn không liệt kê tệp js của bộ điều khiển? Bạn đang nói rằng bạn không bao gồm nó?

— Demodave

@DavidStone vâng - đó là trường hợp của tôi, hồi đó.

— Mariusz

Một lỗi noob khác: Dấu ngoặc nhọn, v.v. trong bộ điều khiển có thể gây ra cùng một loại lỗi hiển thị trong bảng điều khiển.

— user2938649

9

Tôi vừa thực hiện hướng dẫn này và làm theo câu trả lời @ gion_13. Vẫn không hoạt động. Giải quyết vấn đề này bằng cách đặt tên ng-app của tôi trong chỉ mục giống với tên trong tệp js của tôi. Hoàn toàn giống hệt nhau, ngay cả những câu trích dẫn. Vì thế:

<div ng-app="myapp">
    <div ng-controller="FirstCtrl">

và js:

 angular.module("myapp", [])
.controller('FirstCtrl',function($scope) {
    $scope.data= {message:"hello"};
  });

Kỳ lạ là ng-app phải giống hệt nhau nhưng ng-controller thì không.

— an1waukoni
nguồn

Fours giờ này chi phí cho tôi; (, cảm ơn vì cuối cùng đã giúp tôi tìm nó ra.

— Dowlers

7

Bạn phải đặt tênng-app , tạo cho ứng dụng của bạn một không gian tên; chỉ đơn giản là sử dụng ng-app là không đủ .

Thay vì:

<html ng-app>
...

Thay vào đó, bạn sẽ cần một thứ như thế này:

<html ng-app="app">
...

Sau đó, như vậy:

var app = angular.module("app", []).controller("ActionsController", function($scope){});

— người dùng1429980
nguồn

5

Một điều tốt đẹp khác: Vô tình xác định lại các mô-đun. Tôi đã sao chép / dán nội dung hơi quá háo hức vào đầu ngày hôm nay và cuối cùng đã có một định nghĩa mô-đun ở đâu đó, mà tôi đã ghi đè lên các định nghĩa bộ điều khiển của mình:

// controllers.js - dependencies in one place, perfectly fine
angular.module('my.controllers', [/* dependencies */]);

Sau đó, trong các định nghĩa của tôi, tôi phải tham chiếu nó như vậy:

// SomeCtrl.js - grab the module, add the controller
angular.module('my.controllers')
 .controller('SomeCtrl', function() { /* ... */ });

Những gì tôi đã làm thay vào đó, là:

// Do not try this at home!

// SomeCtrl.js
angular.module('my.controllers', []) // <-- redefined module, no harm done yet
  .controller('SomeCtrl', function() { /* ... */ });

// SomeOtherCtrl.js
angular.module('my.controllers', []) // <-- redefined module - SomeCtrl no longer accessible
  .controller('SomeOtherCtrl', function() { /* ... */ });

Lưu ý dấu ngoặc phụ trong lệnh gọi tới angular.module.

— Michael Jess
nguồn

3

xóa ng-app = "" khỏi

<div ng-app="">

và đơn giản là làm cho nó

<div>

— John Smith
nguồn

3

Nếu bạn sử dụng định tuyến trong cấu hình ứng dụng của mình, hãy đảm bảo rằng bạn không sử dụng ng-controller trong html. Thay vào đó bạn nên có ng-view. Bộ điều khiển thường sẽ được xác định cùng với các khung nhìn trong định tuyến.

— Marc

1

Tôi cũng phải đối mặt với cùng một vấn đề. Nhưng vấn đề là tôi đã quên liệt kê mô-đun trong danh sách các mô-đun mà ng-app phụ thuộc vào.

3

Đây nên là một bình luận, không phải là một câu trả lời.

— Anthony Perot

1

Tôi đã đối mặt với vấn đề này và nó đã được khắc phục bằng cách sau:

trước tiên hãy xóa ng-app khỏi:
```
<html ng-app>
```
thêm tên của ng-app vào myApp:
```
<div ng-app="myApp">
```

thêm dòng mã này trước hàm:

angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);

cái nhìn cuối cùng của kịch bản:

angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);

function FirstCtrl($scope){
    $scope.data = {message: "Hello"};
}

— Azhar
nguồn

1

Trong trường hợp của tôi, thông báo này đến từ việc tiêm phụ thuộc bị quên trong mô-đun chính

— Thomas Gobert
nguồn

1

Điều này có thể xảy ra nếu bạn đã định cấu hình sai để thêm mã ứng dụng góc cạnh của mình nhiều lần. Trong trường hợp của tôi, điều này nằm trong index.js và nó đã thêm nó như là một phần của thư mục tệp js (được đặt trong gulp) trước và sau khi khai báo bộ điều khiển của tôi. Sau khi tôi thêm một loại trừ để index.js không được rút gọn và đưa vào lần thứ hai, ứng dụng của tôi bắt đầu hoạt động. Một mẹo khác nếu bất kỳ giải pháp nào ở trên không giải quyết được vấn đề của bạn.

— rncrtr
nguồn

1

Thứ nhất - Nếu tên mô-đun không được xác định, trong JS, bạn sẽ không thể truy cập mô-đun và liên kết bộ điều khiển với nó.

Bạn cần cung cấp tên mô-đun cho mô-đun góc. có sự khác biệt trong việc sử dụng mô-đun xác định cũng như 1. angle.module ("firstModule", []) 2. angle.module ("firstModule")

1 - một là khai báo mô-đun mới "firstModule" mà không có phụ thuộc nào được thêm vào trong các đối số thứ hai. 2 - Đây là sử dụng "firstModule" được khởi tạo ở một nơi khác và bạn đang cố gắng lấy mô-đun đã khởi tạo và thực hiện sửa đổi nó.

— Eshaan Kumar
nguồn

0

tôi đã gặp sự cố này nhưng tôi đã có thể khắc phục sự cố này bằng cách đổi tên bộ điều khiển, vui lòng thử nó.

ctrlSub.execSummaryDocuments = function(){};

— Amay Kulkarni
nguồn

0

đôi khi có điều gì đó sai trong cú pháp của mã bên trong hàm gây ra lỗi này. Kiểm tra chức năng của bạn một cách chính xác. Trong trường hợp của tôi, điều này đã xảy ra khi tôi đang cố gắng gán các trường Json với các giá trị và đang sử dụng dấu hai chấm: để thực hiện việc gán thay vì dấu bằng = ...

— Amitesh Ranjan
nguồn

0

Tôi đã có hai bộ điều khiển có cùng tên được xác định trong hai tệp javascript khác nhau. Khó chịu rằng góc cạnh đó không thể đưa ra thông báo lỗi rõ ràng hơn cho thấy xung đột không gian tên.

— thebiggestlebowski
nguồn

0

Tôi không chắc về hướng dẫn này nhưng tôi đã gặp vấn đề tương tự khi quên đưa tệp vào quy trình thu nhỏ grunt / gulp.

grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/missing_controller.js']
      }
    }
  }
});

Hy vọng rằng sẽ giúp.

— Patrik Bego
nguồn

0

Xem cách viết thư của bạn quá. Tôi đã dành một giờ tốt để đuổi theo con bọ này.

<section id="forgotpwd" ng-controller="ForgotPwdController">

trong khi tôi đặt tên cho bộ điều khiển

angular
    .module('app')
    .controller('ForgotpwdController', ForgotpwdController);

Tất cả chúng phải được đặt tên nhất quán, trong trường hợp này Quên p wdController với p viết thường.

— Jeson Martajaya
nguồn