Kesalahan AngularJS: 'argumen' FirstCtrl 'bukan fungsi, tidak ditentukan'

93

Saya perhatikan pertanyaan yang sama diajukan beberapa kali di sini, saya mencoba menyelesaikannya tetapi tidak ada yang membantu.

Saya mengikuti tutorial ini dengan video egghead.

Tetapi ketika saya masuk ke bagian Pengontrol dan Berbagi data antar pengontrol, saya tidak bisa membuatnya berfungsi.

Saat saya menjalankannya dengan Chrome, saya mendapatkan kesalahan ini di konsol:

'argumen' FirstCtrl 'bukan sebuah fungsi, tidak terdefinisi'.

Saya benar-benar tidak tahu apa yang salah. Kodenya sama dengan tutorial.

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
sumber
Berikut adalah solusi di komentar kedua - stackoverflow.com/questions/24894870/…
Kanchan

Jawaban:

108

Anda memiliki 2 ng-apparahan tanpa nama di html Anda.
Kehilangan satu di div Anda.

Perbarui
Mari kita coba pendekatan yang berbeda.
Tentukan modul dalam file js Anda dan tetapkan ng-appdirektif untuk itu. Setelah itu, tentukan controller seperti komponen ng, bukan sebagai fungsi sederhana: 

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

dan bagian js: 

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

Berikut demo online yang melakukan hal itu: http://jsfiddle.net/FssbL/1/

gion_13
sumber
Terima kasih banyak atas jawabannya, sayangnya saya masih mendapatkan kesalahan yang sama .. Jadi saya kehilangan ng-app = "" dari div, tetapi masih tidak berfungsi.
Pumba
1
Terima kasih banyak atas bantuannya! Saya tidak memahaminya lagi, saya melakukan hal yang persis sama seperti yang Anda tunjukkan di sini dan di demo online tetapi tetap mengatakan 'FirstCtrl' tidak ditentukan. Saya akan mencobanya lagi dari awal, semoga berhasil, karena di tutorial berikutnya saya mendapatkan masalah yang sama.
Pumba
Bagus!! Berhasil. Saya lupa menutup atribut type pada tag skrip untuk file js. Dan kombinasi dengan solusi kedua Anda membuatnya berhasil! Terima kasih banyak :))
Pumba
6
Video demo tidak membungkus pengontrol di dalam modul. Jadi mengapa itu berhasil untuknya, tetapi tidak untuk saya? egghead.io/lessons/angularjs-controllers
Demodave
2
@ Demodave, saya punya pertanyaan yang sama. Saya berasumsi bahwa video tersebut direkam selama versi AngularJS sebelumnya, dan oleh karena itu mendefinisikan pengontrol berpotensi kurang ketat (tetapi, itu hanya asumsi saya, saya akan senang jika seseorang mengonfirmasi atau menolak)
MandM
93

Saya mendapat pesan kesalahan yang persis sama dan dalam kasus saya ternyata saya tidak mencantumkan file JS pengontrol (misalnya first-ctrl.js) di index.html saya

Mariusz
sumber
1
Apa maksud Anda tidak mencantumkan file js pengontrol? Apakah Anda mengatakan bahwa Anda tidak memasukkannya?
Demodave
@DavidStone ya - itu kasus saya, saat itu.
Mariusz
Kesalahan noob lainnya: Tanda kurung merah, dll. Di pengontrol dapat menyebabkan jenis kesalahan yang sama ditampilkan di konsol.
pengguna2938649
9

Saya baru saja melakukan tutorial ini dan mengikuti jawaban @ gion_13. Masih tidak berhasil. Selesaikan dengan membuat nama ng-app saya di indeks identik dengan yang ada di file js saya. Persis sama, bahkan kutipannya. Begitu:

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

dan js:

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

Aneh bagaimana ng-app harus identik tetapi ng-controller tidak.

an1waukoni
sumber
Empat jam ini menghabiskan biaya saya; (, terima kasih akhirnya membantu saya mengetahuinya.
Dowlers
7

Anda harus memberi nama Andang-app , memberi aplikasi Anda namespace; hanya menggunakan ng-app tidak cukup .

Dari pada:

<html ng-app>
...

Anda akan membutuhkan sesuatu seperti ini sebagai gantinya:

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

Kemudian, seperti:

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

Satu lagi bagus: Mendefinisikan ulang modul secara tidak sengaja. Saya menyalin / menempelkan barang-barang sedikit terlalu bersemangat sebelumnya hari ini dan akhirnya memiliki definisi modul di suatu tempat, yang saya timpa dengan definisi pengontrol saya:

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

Kemudian dalam definisi saya, saya seharusnya merujuknya seperti ini:

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

Yang saya lakukan adalah:

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

Perhatikan braket ekstra dalam panggilan ke angular.module.

Michael Jess
sumber
3

hapus ng-app = "" dari

<div ng-app="">

dan lakukan saja

<div>
John Smith
sumber
3
Jika Anda menggunakan perutean dalam konfigurasi aplikasi Anda, pastikan Anda tidak menggunakan ng-controller di html. Anda seharusnya memiliki ng-view. Kontroler biasanya akan ditentukan bersama dengan tampilan dalam perutean.
Marc
1

Saya juga menghadapi masalah yang sama. Tetapi masalahnya adalah saya lupa mencantumkan modul dalam daftar modul tempat ng-app bergantung.


sumber
3
Ini harus menjadi komentar, bukan jawaban.
Anthony Perot
1

Saya telah menghadapi masalah ini dan diperbaiki dengan cara berikut:

  1. pertama-tama hapus ng-app dari:

    <html ng-app>

  2. tambahkan nama ng-app ke myApp:

    <div ng-app="myApp">

  3. tambahkan baris kode ini sebelum fungsi: 

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

tampilan akhir skrip:

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

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

Dalam kasus saya, pesan ini berasal dari injeksi ketergantungan yang terlupakan di modul utama

Thomas Gobert
sumber
1

Ini bisa terjadi jika Anda salah konfigurasi menelan untuk menambahkan kode aplikasi sudut lebih dari sekali. Dalam kasus saya, ini ada di index.js, dan itu menambahkannya sebagai bagian dari direktori file js (digabung dalam gulp) sebelum dan sesudah deklarasi pengontrol saya. Setelah saya menambahkan pengecualian agar index.js tidak diperkecil dan disuntikkan untuk kedua kalinya, aplikasi saya mulai berfungsi. Tip lain jika salah satu solusi di atas tidak mengatasi masalah Anda.

rncrtr
sumber
1

Pertama - Jika nama modul tidak ditentukan, di JS Anda tidak akan dapat mengakses modul dan menautkan pengontrol ke modul tersebut.

Anda perlu memberikan nama modul ke modul sudut. ada perbedaan juga dalam menggunakan modul pendefinisian 1. angular.module ("firstModule", []) 2. angular.module ("firstModule")

1 - pertama adalah mendeklarasikan modul baru "firstModule" tanpa ketergantungan yang ditambahkan dalam argumen kedua. 2 - Ini untuk menggunakan "firstModule" yang diinisialisasi di tempat lain dan Anda menggunakan mencoba mendapatkan modul yang diinisialisasi dan melakukan modifikasi padanya.

Eshaan Kumar
sumber
0

saya menghadapi masalah ini tetapi saya dapat memperbaiki masalah ini dengan mengganti nama pengontrol, silakan coba.

ctrlSub.execSummaryDocuments = function(){};
Amay Kulkarni
sumber
0

terkadang sesuatu yang salah dalam sintaks kode di dalam fungsi menyebabkan kesalahan ini. Periksa fungsi Anda dengan benar. Dalam kasus saya itu terjadi ketika saya mencoba untuk menetapkan bidang Json dengan nilai dan menggunakan titik dua: untuk membuat tugas alih-alih tanda sama dengan = ...

Amitesh Ranjan
sumber
0

Saya memiliki dua pengontrol dengan nama yang sama yang ditentukan dalam dua file javascript yang berbeda. Mengiritasi sudut itu tidak dapat memberikan pesan kesalahan yang lebih jelas yang menunjukkan konflik namespace.

thebiggestlebowski
sumber
0

Saya tidak yakin tentang tutorial ini tetapi saya memiliki masalah yang sama ketika saya lupa memasukkan file ke dalam proses minimisasi grunt / gulp. 

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

Semoga membantu.

Patrik Bego
sumber
0

Perhatikan casing surat Anda juga. Saya menghabiskan waktu berjam-jam untuk mengejar serangga ini.

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

sementara saya memberi nama pengontrol

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

Mereka semua harus diberi nama secara konsisten, dalam hal ini Lupa p wdController dengan huruf kecil p.

Jeson Martajaya
sumber