ข้อผิดพลาด AngularJS: 'อาร์กิวเมนต์' FirstCtrl 'ไม่ใช่ฟังก์ชันไม่ได้กำหนด'

Question 1

ฉันสังเกตเห็นว่ามีการถามคำถามเดียวกันนี้สองสามครั้งที่นี่ฉันพยายามแก้ไข แต่ไม่มีอะไรช่วยได้

ฉันกำลังติดตามบทช่วยสอนนี้กับวิดีโอ Egghead

แต่เมื่อฉันเข้าไปที่ส่วนของคอนโทรลเลอร์และการแชร์ข้อมูลระหว่างคอนโทรลเลอร์ฉันไม่สามารถใช้งานได้

เมื่อฉันรันด้วย Chrome ฉันได้รับข้อผิดพลาดนี้ในคอนโซล:

'อาร์กิวเมนต์' FirstCtrl 'ไม่ใช่ฟังก์ชันไม่ได้กำหนด'

ฉันไม่รู้จริงๆว่ามีอะไรผิดปกติ รหัสจะเหมือนกันจากในบทช่วยสอน

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" };
}

Question 2

คุณมี 2 ng-appคำสั่งที่ไม่มีชื่อใน html ของคุณ
สูญเสียหนึ่งใน div ของคุณ

อัปเดต
ลองใช้วิธีอื่น
กำหนดโมดูลในไฟล์ js ของคุณและกำหนดng-appคำสั่งให้กับมัน หลังจากนั้นให้กำหนดคอนโทรลเลอร์เหมือนส่วนประกอบ ng ไม่ใช่ฟังก์ชันธรรมดา:

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

และส่วน js:

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

นี่คือการสาธิตออนไลน์ที่ทำเช่นนั้น: http://jsfiddle.net/FssbL/1/

Question 3

ฉันได้รับข้อความแสดงข้อผิดพลาดเดียวกันทุกประการและในกรณีของฉันปรากฎว่าฉันไม่ได้แสดงรายการไฟล์คอนโทรลเลอร์ JS (เช่น ctrl.js แรก) ใน index.html ของฉัน

Question 4

ฉันเพิ่งทำบทช่วยสอนนี้และทำตามคำตอบของ @ gion_13 ยังไม่ได้ผล แก้ไขได้โดยทำให้ชื่อng-appของฉันในดัชนีเหมือนกับชื่อในไฟล์ js ของฉัน เหมือนกันทุกประการแม้แต่คำพูด ดังนั้น:

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

และ js:

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

แปลกที่ng-appต้องเหมือนกัน แต่ng-controllerไม่เหมือนกัน

Question 5

คุณต้องตั้งชื่อng-appให้แอปของคุณมีเนมสเปซ เพียงแค่ใช้ไม่เพียงพอng-app

แทน:

<html ng-app>
...

คุณจะต้องใช้สิ่งนี้แทน:

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

จากนั้นเช่น:

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

Question 6

อีกอันที่ดี: การกำหนดโมดูลใหม่โดยบังเอิญ ฉันคัดลอก / วางสิ่งต่างๆก่อนหน้านี้ด้วยความกระตือรือร้นเล็กน้อยในวันนี้และลงเอยด้วยการมีคำจำกัดความของโมดูลที่ใดที่หนึ่งซึ่งฉันเขียนทับด้วยคำจำกัดความตัวควบคุมของฉัน:

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

จากนั้นในคำจำกัดความของฉันฉันควรจะอ้างอิงดังนี้:

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

สิ่งที่ฉันทำแทนคือ:

// 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() { /* ... */ });

angular.moduleหมายเหตุวงเล็บเสริมในการเรียกร้องให้

Question 7

ลบ ng-app = "" จาก

<div ng-app="">

และทำมัน

<div>

Question 8

ฉันก็ประสบปัญหาเดียวกันเช่นกัน แต่ปัญหาคือฉันลืมแสดงรายการโมดูลในรายการโมดูลที่ ng-app ขึ้นอยู่กับ

Question 9

ฉันประสบปัญหานี้และได้รับการแก้ไขด้วยวิธีต่อไปนี้:

ก่อนอื่นให้ลบ ng-app จาก:
```
<html ng-app>
```
เพิ่มชื่อ ng-app ใน myApp:
```
<div ng-app="myApp">
```
เพิ่มบรรทัดของรหัสนี้ก่อนฟังก์ชัน:
```
angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);
```

รูปลักษณ์สุดท้ายของสคริปต์:

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

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

Question 10

ในกรณีของฉันข้อความนี้มาจากการแทรกการพึ่งพาที่ลืมในโมดูลหลัก

Question 11

สิ่งนี้อาจเกิดขึ้นได้หากคุณกำหนดค่าผิดอึกเพื่อเพิ่มโค้ดแอปเชิงมุมมากกว่าหนึ่งครั้ง ในกรณีของฉันสิ่งนี้อยู่ใน index.js และกำลังเพิ่มเป็นส่วนหนึ่งของไดเร็กทอรีของไฟล์ js (globbed in gulp) ก่อนและหลังการประกาศคอนโทรลเลอร์ของฉัน เมื่อฉันเพิ่มการยกเว้นสำหรับ index.js เพื่อไม่ให้ลดขนาดและฉีดครั้งที่สองแอปของฉันก็เริ่มทำงาน เคล็ดลับอีกประการหนึ่งหากวิธีแก้ไขปัญหาข้างต้นไม่สามารถแก้ปัญหาของคุณได้

Question 12

ประการแรก - หากไม่ได้กำหนดชื่อโมดูลใน JS คุณจะไม่สามารถเข้าถึงโมดูลและเชื่อมโยงตัวควบคุมกับโมดูลนั้นได้

คุณต้องระบุชื่อโมดูลให้กับโมดูลเชิงมุม มีความแตกต่างในการใช้การกำหนดโมดูลเช่นกัน 1. angular.module ("firstModule", []) 2. angular.module ("firstModule")

1 - หนึ่งคือการประกาศโมดูลใหม่ "firstModule" โดยไม่มีการเพิ่มการพึ่งพาในอาร์กิวเมนต์ที่สอง 2 - นี่คือการใช้ "firstModule" ซึ่งเริ่มต้นที่อื่นและคุณกำลังพยายามรับโมดูลเริ่มต้นและทำการแก้ไข

Question 13

ฉันประสบปัญหานี้ แต่ฉันสามารถแก้ไขปัญหานี้ได้โดยการเปลี่ยนชื่อคอนโทรลเลอร์โปรดลองดู

ctrlSub.execSummaryDocuments = function(){};

Question 14

บางครั้งมีบางอย่างผิดพลาดในไวยากรณ์ของโค้ดภายในฟังก์ชันทำให้เกิดข้อผิดพลาดนี้ ตรวจสอบการทำงานของคุณอย่างถูกต้อง ในกรณีของฉันมันเกิดขึ้นเมื่อฉันพยายามกำหนดฟิลด์ Json ด้วยค่าและใช้โคลอน: เพื่อทำการกำหนดแทนเครื่องหมายเท่ากับ = ...

Question 15

ฉันมีคอนโทรลเลอร์สองตัวที่มีชื่อเดียวกันซึ่งกำหนดไว้ในไฟล์จาวาสคริปต์สองไฟล์ การระคายเคืองที่เชิงมุมไม่สามารถให้ข้อความแสดงข้อผิดพลาดที่ชัดเจนขึ้นซึ่งบ่งชี้ความขัดแย้งของเนมสเปซ

Question 16

ฉันไม่แน่ใจเกี่ยวกับบทช่วยสอนนี้ แต่ฉันมีปัญหาเดียวกันเมื่อฉันลืมรวมไฟล์ไว้ในกระบวนการย่อขนาดฮึดฮัด / อึก

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

หวังว่าจะช่วยได้

Question 17

ดูปลอกจดหมายของคุณด้วย ฉันใช้เวลาหนึ่งชั่วโมงในการไล่ตามข้อบกพร่องนี้

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

ในขณะที่ฉันตั้งชื่อคอนโทรลเลอร์

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

พวกเขาทั้งหมดควรได้รับการตั้งชื่ออย่างสม่ำเสมอในกรณีนี้ลืมp wdController ด้วยตัวพิมพ์เล็ก p