Pengontrol bukan fungsi, tidak ditentukan, saat mendefinisikan pengontrol secara global

123

Saya menulis aplikasi sampel menggunakan angularjs. saya mendapat kesalahan yang disebutkan di bawah ini di browser chrome.

Kesalahan adalah

Kesalahan: [ng: areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined

Yang menjadikan sebagai

Argumen 'ContactController' bukanlah sebuah fungsi, tidak ditentukan

Kode

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="../angular.min.js"></script>
    <script type="text/javascript">
        function ContactController($scope) {
            $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

            $scope.add = function() {
                $scope.contacts.push($scope.newcontact);
                $scope.newcontact = "";                 
            };
        }    
    </script>    
</head>

<body>    
    <h1>  modules sample </h1>

    <div ng-controller="ContactController">
        Email:<input type="text" ng-model="newcontact">
        <button ng-click="add()">Add</button>

        <h2> Contacts </h2>
        <ul>
            <li ng-repeat="contact in contacts"> {{contact}} </li>
        </ul>    
    </div>
</body> 
</html>

— yokks
sumber

172

Dengan Angular 1.3+ Anda tidak dapat lagi menggunakan deklarasi pengontrol global pada cakupan global (Tanpa registrasi eksplisit). Anda perlu mendaftarkan pengontrol menggunakan module.controllersintaks.

Contoh:-

angular.module('app', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

        $scope.add = function() {
            $scope.contacts.push($scope.newcontact);
            $scope.newcontact = "";

        };
    }]);

atau

function ContactController($scope) {
    $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

    $scope.add = function() {
        $scope.contacts.push($scope.newcontact);
        $scope.newcontact = "";
    };
}
ContactController.$inject = ['$scope'];
angular.module('app', []).controller('ContactController', ContactController);

Ini adalah perubahan yang mengganggu tetapi dapat dimatikan untuk menggunakan global dengan menggunakanallowGlobals .

Contoh:-

angular.module('app')
    .config(['$controllerProvider', function($controllerProvider) {
        $controllerProvider.allowGlobals();
    }]);

Berikut adalah komentar dari sumber Angular: -

periksa apakah pengontrol dengan nama yang diberikan terdaftar melalui $controllerProvider

periksa apakah mengevaluasi string pada lingkup saat ini mengembalikan konstruktor

jika $ controllerProvider # allowGlobals, periksa objek window[constructor]global window(tidak disarankan)

 .....

expression = controllers.hasOwnProperty(constructor)
            ? controllers[constructor]
            : getter(locals.$scope, constructor, true) ||
                (globals ? getter($window, constructor, true) : undefined);

Beberapa pemeriksaan tambahan: -

Pastikan untuk menempatkan appname di ng-appdirektif pada elemen root sudut Anda (misalnya: - html) juga. Contoh: - ng-app = "myApp"
Jika semuanya baik-baik saja dan Anda masih mendapatkan masalah, ingatlah untuk memastikan Anda memiliki file yang tepat yang disertakan dalam skrip.
Anda belum mendefinisikan modul yang sama dua kali di tempat berbeda yang menghasilkan entitas apa pun yang ditentukan sebelumnya pada modul yang sama untuk dihapus, Contoh angular.module('app',[]).controller(..dan lagi di tempat lain angular.module('app',[]).service(..(dengan kedua skrip disertakan tentu saja) dapat menyebabkan pengontrol terdaftar sebelumnya di modul yang appakan dihapus dengan rekreasi kedua modul.

— PSL
sumber

Bagaimana cara memeriksanya seperti yang disarankan? periksa apakah pengontrol dengan nama yang diberikan terdaftar melalui $ controllerProvider

— geckob

app.register.controller ('TheController', TheController); melakukan trik untuk saya.

— morph85

33

Saya mendapat masalah ini karena saya telah membungkus file definisi pengontrol dalam penutupan:

(function() {
   ...stuff...
});

Tapi saya lupa untuk benar-benar menjalankan closure itu untuk mengeksekusi kode definisi itu dan benar-benar memberi tahu Javascript pengontrol saya ada. Yaitu, di atas perlu:

(function() {
   ...stuff...
})();

Perhatikan () di bagian akhir.

— rogueleaderr
sumber

1

+1 Menariknya, sepertinya studio visual terkadang secara otomatis menghapus permintaan tersebut. Saya menyalin file js yang sudah ada yang berisi kode ini; yang asli memiliki pemanggilan, file yang disalin tidak.

— papergodzilla

16

Saya seorang pemula dengan Angular dan saya melakukan kesalahan dasar karena tidak menyertakan nama aplikasi di elemen root sudut. Jadi, mengubah kode dari

<html data-ng-app>

untuk

<html data-ng-app="myApp">

bekerja untuk saya. @PSL, telah membahas hal ini dalam jawabannya di atas.

— Prakash Tiwari
sumber

8

Saya mengalami kesalahan ini karena saya tidak memahami perbedaan antara angular.module('myApp', [])dan angular.module('myApp').

Ini membuat modul 'myApp' dan menimpa modul apa pun yang ada bernama 'myApp':

angular.module('myApp', [])

Ini mengambil modul yang ada 'myApp':

angular.module('myApp')

Saya telah menimpa modul saya di file lain, menggunakan panggilan pertama di atas yang membuat modul lain alih-alih mengambil seperti yang saya harapkan.

Lebih detail di sini: https://docs.angularjs.org/guide/module

— Jake Stewart
sumber

1

Dalam kasus saya, saya menambahkan modul, saya menambahkan pengontrol, tetapi saya lupa menambahkan modul dalam daftar modul untuk aplikasi. `angular.module (" app ", [HEREYOURMODULE] ...`

— Thomas

3

Saya baru saja bermigrasi ke angular 1.3.3 dan saya menemukan bahwa jika saya memiliki beberapa pengontrol dalam file yang berbeda saat aplikasi diganti dan saya kehilangan wadah yang dinyatakan pertama kali.

Saya tidak tahu apakah itu latihan yang baik, tapi mungkin bisa membantu untuk yang lain.

var app = app;
if(!app) {
    app = angular.module('web', ['ui.bootstrap']);
}
app.controller('SearchCtrl', SearchCtrl);

— Franzi
sumber

2

Saya mengalami masalah ini ketika saya secara tidak sengaja menyatakan ulang myApp:

var myApp = angular.module('myApp',[...]);
myApp.controller('Controller1', ...);

var myApp = angular.module('myApp',[...]);
myApp.controller('Controller2', ...);

Setelah deklarasikan ulang, Controller1berhenti bekerja dan memunculkan kesalahan OP.

— Daniel Flippance
sumber

2

Saran yang sangat bagus, kecuali bahwa kesalahan YANG SAMA DAPAT terjadi hanya dengan kehilangan skrip penting yang disertakan pada halaman root Anda

contoh:

halaman: index.html

   np-app="saleApp"

Hilang

<script src="./ordersController.js"></script>

Saat Route diberi tahu pengontrol dan tampilan apa yang akan disajikan:

 .when('/orders/:customerId', {
     controller: 'OrdersController',
     templateUrl: 'views/orders.html'
 })

Begitu penting masalah pengontrol yang tidak ditentukan DAPAT terjadi dalam kesalahan yang tidak disengaja ini bahkan tidak mereferensikan pengontrol!

— Tom Stickel
sumber

0

Kesalahan ini mungkin juga terjadi ketika Anda memiliki proyek besar dengan banyak modul. Pastikan bahwa aplikasi (modul) yang digunakan di file angular Anda sama dengan yang Anda gunakan di template, dalam contoh " thisApp ".

app.js

angular
.module('thisApp', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

        $scope.add = function() {
            $scope.contacts.push($scope.newcontact);
            $scope.newcontact = "";

        };
    }]);

index.html

  <html>
    <body ng-app='thisApp' ng-controller='ContactController>
         ...
        <script type="text/javascript" src="assets/js/angular.js"></script>
        <script src="app.js"></script>
    </body>
    </html>

— Patrick
sumber

0

Jika semuanya gagal dan Anda menggunakan Gulp atau yang serupa ... jalankan kembali!

Saya menyia-nyiakan waktu 30 menit untuk memeriksa semuanya ketika yang dibutuhkan hanyalah tendangan cepat di celana.

— sigmapi13
sumber

0

Jika Anda menggunakan rute (probabilitas tinggi) dan konfigurasi Anda memiliki referensi ke pengontrol dalam modul yang tidak dideklarasikan sebagai dependensi, maka inisialisasi mungkin juga gagal.

Misalnya dengan asumsi Anda telah mengonfigurasi ngRoute untuk aplikasi Anda, seperti

angular.module('yourModule',['ngRoute'])
.config(function($routeProvider, $httpProvider) { ... });

Hati-hati di blok yang menyatakan rute,

.when('/resourcePath', { 
templateUrl: 'resource.html',
controller: 'secondModuleController' //lives in secondModule
});

Nyatakan secondModulesebagai ketergantungan setelah 'ngRoute' akan menyelesaikan masalah. Saya tahu saya punya masalah ini.

— H.Rabiee
sumber

0

Saya mendapatkan kesalahan ini karena saya menggunakan versi angular lama yang tidak kompatibel dengan kode saya.

— Dean Sha
sumber

0

Kesalahan ini terjadi, dalam kasus saya, didahului oleh kesalahan sintaks di list.find () fuction; 'temukan' metode daftar yang tidak dikenali oleh IE11, jadi harus diganti dengan metode Filter, yang berfungsi untuk IE11 dan chrome. lihat https://github.com/flrs/visavail/issues/19

— HydTechie
sumber

0

Kesalahan ini, dalam kasus saya, didahului oleh kesalahan sintaksis di metode pencarian daftar di IE11. jadi ganti metode temukan dengan metode filter seperti yang disarankan https://github.com/flrs/visavail/issues/19

maka di atas pengontrol tidak didefinisikan kesalahan diselesaikan.

— HydTechie
sumber

-3

Saya mendapat kesalahan yang sama saat mengikuti tutorial lama dengan (belum cukup lama) AngularJS 1.4.3. Sejauh ini solusi paling sederhana adalah mengedit sumber angular.js dari

function $ControllerProvider() {
  var controllers = {},
      globals = false;

untuk

function $ControllerProvider() {
  var controllers = {},
      globals = true;

dan cukup ikuti tutorial sebagaimana adanya, dan fungsi global yang tidak digunakan lagi hanya berfungsi sebagai pengontrol.

— MKaama
sumber

Ini praktik yang buruk. Seperti yang disebutkan dalam jawaban PSL, Anda dapat melakukannya dengan cara ini:

angular.module('app')     .config(['$controllerProvider', function($controllerProvider) {         $controllerProvider.allowGlobals();     }]);

— gm2008

-1. Ini juga merupakan cara terbaik untuk memastikan bahwa (a) Anda menimpa ini segera setelah Anda meningkatkan, yang akan menghasilkan laporan yang tidak perlu (dan salah) bahwa "memutakhirkan 1.4.3 ke 1.4.4 merusak aplikasi saya!" dan / atau (b) Anda tidak mengupgrade aplikasi karena "sulit".

— Phillip Copley