Denetleyici bir işlev değil, denetleyicileri küresel olarak tanımlarken tanımsız hale geldi

123

Angularjs kullanarak örnek bir uygulama yazıyorum. Chrome tarayıcısında aşağıda belirtilen bir hatayla karşılaştım.

Hata

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

Hangisi olarak işler

'ContactController' bağımsız değişkeni bir işlev değil, tanımsız hale getirildi

kod

<!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>
javascript  angularjs  angularjs-directive  angularjs-scope 
— yokks
kaynak

Yanıtlar:

172

Angular 1.3+ ile artık genel kapsamda genel denetleyici bildirimini kullanamazsınız (Açık kayıt olmadan). module.controllerSözdizimini kullanarak denetleyiciyi kaydetmeniz gerekir .

Misal:-

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

        };
    }]);

veya

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);

Bu son derece önemli bir değişikliktir ancak kullanılarak globallerin kullanılması kapatılabilirallowGlobals .

Misal:-

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

İşte Angular kaynaktan gelen yorum: -

  • verilen adla bir kontrolörün kaydedilip kaydedilmediğini kontrol edin $controllerProvider
  • Geçerli kapsamdaki dizenin değerlendirilmesi bir yapıcı döndürürse kontrol edin
  • $ controllerProvider # allowGlobals window[constructor]ise, genel windownesneyi kontrol edin (önerilmez)
 .....

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

Bazı ek kontroller: -

  • Appname ng-appyönergesini açısal kök öğenize de (örneğin: - html) koyduğunuzdan emin olun . Örnek: - ng-app = "Uygulamam"

  • Her şey yolundaysa ve hala sorunu yaşıyorsanız, komut dosyalarında doğru dosyanın bulunduğundan emin olun.

  • Aynı modülü farklı yerlerde iki kez tanımlamadınız, bu da daha önce aynı modül üzerinde tanımlanan herhangi bir varlığın silinmesine neden olur, Örnek angular.module('app',[]).controller(..ve tekrar başka bir yerde angular.module('app',[]).service(..(elbette her iki komut dosyası da dahil) önceden kaydedilmiş denetleyicinin modülün appikinci rekreasyonuyla temizlenecek modül.

— PSL
kaynak
Bunu önerildiği gibi nasıl kontrol edebilirim? $ controllerProvider aracılığıyla bir kontrolcünün kayıtlı olup olmadığını kontrol edin
— geckob
app.register.controller ('TheController', TheController); benim için hile yaptı.
— morph85
33

Bu sorunu aldım çünkü bir denetleyici tanım dosyasını bir kapanışta sarmalamıştım:

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

Ancak, bu tanım kodunu yürütmek ve Javascript'e denetleyicimin var olduğunu söylemek için bu kapanışı gerçekten başlatmayı unutmuştum. Yani, yukarıdakilerin olması gerekir:

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

Sonundaki () işaretine dikkat edin.

— rogueleaderr
kaynak
1
+1 İlginç bir şekilde, görsel stüdyo bazen çağrıyı otomatik olarak kaldırıyor gibi görünüyor. Bu kodu içeren mevcut bir js dosyasını kopyaladım; orijinal çağrıya sahipti, kopyalanan dosya yoktu.
— papergodzilla
16

Angular konusunda yeni başlayan biriyim ve temel hatayı, uygulama adını açısal kök öğeye dahil etmemekle yaptım. Yani, kodu değiştirmek

<html data-ng-app>

için 

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

benim için çalıştı. @PSL, bunu yukarıdaki cevabında zaten ele aldı.

— Prakash Tiwari
kaynak
8

Bu hatayı aldım çünkü angular.module('myApp', [])ve arasındaki farkı anlamadım angular.module('myApp').

Bu , 'uygulamam' modülünü oluşturur ve 'Uygulamam' adlı mevcut modülün üzerine yazar:

angular.module('myApp', [])

Bu , mevcut bir 'uygulamam' modülünü alır :

angular.module('myApp')

Beklediğim gibi almak yerine başka bir modül oluşturan yukarıdaki ilk çağrıyı kullanarak modülümün üzerine başka bir dosyaya yazıyordum.

Daha fazla ayrıntı burada: https://docs.angularjs.org/guide/module

— Jake Stewart
kaynak
1
Benim durumumda modülü ekledim, denetleyiciyi ekledim, ancak modülü uygulamanın modül listesine eklemeyi unuttum. `angular.module (" uygulama ", [HEREYOURMODULE] ...` `
— Thomas
3

Sadece açısal 1.3.3'e geçiyorum ve uygulama geçersiz kılındığında farklı dosyalarda birden fazla denetleyicim varsa ve ilk beyan edilen kapsayıcıları kaybettim.

İyi bir uygulama olup olmadığını bilmiyorum ama belki bir başkası için yardımcı olabilir.

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

Yanlışlıkla yeniden ilan ettiğimde bu sorunu yaşadım myApp:

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

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

Yeniden bildirdikten sonra Controller1çalışmayı durdurur ve OP hatasını yükseltir.

— Daniel Flippance
kaynak
2

Gerçekten harika bir tavsiye, ancak AYNI hatası, kök sayfanızdaki kritik komut dosyasını kaçırarak oluşabilir.

misal:

sayfa: index.html 

   np-app="saleApp"

Eksik

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

Bir Rota hangi denetleyicinin ve görünüme sunulacağı söylendiğinde:

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

Bu yüzden çok önemlidir, tanımlanmamış kontrolör sorunu, bu yanlışlıkla kontrol cihazına referans vermeme hatasında ortaya çıkabilir!

— Tom Stickel
kaynak
0

Bu hata, birçok modül içeren büyük bir projeniz olduğunda da ortaya çıkabilir. Açısal dosyanızda kullanılan uygulamanın (modülün) şablonunuzda kullandığınız uygulama (modül) ile aynı olduğundan emin olun, bu örnekte " 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
kaynak
0

Her şey başarısız olursa ve Gulp veya benzeri bir şey kullanıyorsanız ... sadece tekrar çalıştırın!

Tek ihtiyacım olan şey pantolona hızlı bir tekme atmakken her şeyi dört kez kontrol ederek 30 dakikayı boşa harcadım.

— sigmapi13
kaynak
0

Yol kullanıyorsanız (yüksek olasılık) ve yapılandırmanızın, bağımlılık olarak bildirilmemiş bir modüldeki bir denetleyiciye referansı varsa, başlatma da başarısız olabilir.

Örneğin uygulamanız için ngRoute'u yapılandırdığınızı varsayarsak,

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

Rotaları ilan eden blokta dikkatli olun, 

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

Beyan secondModulesorunun çözülmesi gerekir 'ngRoute' sonra bir bağımlılık olarak. Bu sorunu yaşadığımı biliyorum.

— H.Rabiee
kaynak
0

Bu hatayı alıyordum çünkü kodumla uyumlu olmayan eski bir açısal sürüm kullanıyordum.

— Dean Sha
kaynak
0

Bu hata, benim durumumda, IE11'deki bir listenin bulma yönteminde sözdizimi hatasıyla başladı. bu nedenle bulma yöntemi, önerilen https://github.com/flrs/visavail/issues/19 gibi filtre yöntemiyle değiştirildi

sonra yukarıdaki kontrolör tanımlanmamış hata çözüldü.

— HydTechie
kaynak
-3

AngularJS 1.4.3 ile (yeterince eski değil) eski bir öğreticiyi izlerken aynı hatayı aldım. Açık farkla en basit çözüm, angular.js kaynağını

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

için

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

öğreticiyi olduğu gibi izleyin ve kullanımdan kaldırılan global işlevler yalnızca denetleyiciler olarak çalışır.

— MKaama
kaynak
Bu kötü bir uygulamadır. angular.module('app') .config(['$controllerProvider', function($controllerProvider) { $controllerProvider.allowGlobals(); }]);
— PSL'nin cevabında
-1. Bu aynı zamanda (a) yükseltme yaptığınız anda bunun üzerine yazmanızı sağlamanın harika bir yoludur, bu da "1.4.3'ten 1.4.4'e yükseltmenin başvurumu bozduğuna dair gereksiz (ve yanlış) raporlar oluşturur!" ve / veya (b) uygulamanızı "zor" olduğu için yükseltmiyorsunuz.
— Phillip Copley
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.