Hata: Bağımsız değişken bir işlev değil, tanımsız hale geldi

120

Scala Play ile AngularJS kullanarak bu hatayı alıyorum.

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

Haftanın günlerinden oluşan bir tablo oluşturmaya çalışıyorum.

Lütfen koduma bir göz atın. Kontrolörün adını kontrol ettim ama bu doğru görünüyor. Not: Bu SO cevabında kullanılan kod

index.scala.html

@(message: String)

@main("inTime") {

<!doctype html>
<html lang="en" ng-app>
    <head>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
    </head>
<div ng-controller="MainCtrl">
    <table border="1">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td ngm-if="$first" rowspan="{{items.length}}">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
</div>
</html> 
}

MainCtrl.js

(function() {
    angular.module('[myApp]', []).controller('MainCtrl', function($scope) {
        $scope.data = {
            Colors: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
        }
    });
}());

angularjs playframework

— Kevin Meredith
kaynak

15

Kullandığınız html olarak ng-appdeğiştirebilir misinizng-app=myApp

— Chandermani

Aynı hatayı aldım @Chandermani

— Kevin Meredith

Kapatmayı (IIFE) koddan çıkarmayı denediniz mi? Bu problemi yaşadığımda, javascript'imde bir PHP hatası oluştu.

— Kevin Beal

1

Sorununuzu şu kontrol listesi ile öğrenebilirsiniz: stackoverflow.com/a/26797874/930170

— Sergei Panfilov

MainCtrl.controller.js ekleyip eklemediğinizi onaylayın BundleConfig.cs dosyasına eklenir

— Syed Mohamed

107

[]Modülün adından ([uygulamam]) kaldırın

angular.module('myApp', [])

Ve html'ye ekleyin ng-app="myApp"ve çalışmalıdır.

— Chandermani
kaynak

1

Çalışması için tek yapmam gereken ikinci öneriydi (yani ng-app = "uygulamam" ı ayarlamak). [] Öğesini kaldırırsam, başka bir hata alırım.

— Jason

15

İkinci parametreye sahip olmak, []yeni bir modül oluşturduğunuzu gösterir. İkinci parametrenin kaldırılması, mevcut bir modülü geri aldığınızı gösterir. Dolayısıyla, kontrol angular.moduleetmenin bir yolu, her ikisi de ikinci parametre dahil olmak üzere iki kez arayıp aramayacağınızdır. Eğer öyleyse, sonraki olay ikincinin üzerine yazacak ve o noktaya kadar denetleyicilerin tanımlarını gizleyecektir.

— Carl G

26

Kaldırmak istediğinde [], OP'nin [myApp]yerine sahip olduğu ilk parametreye atıfta bulunuyor myApp. İkinci parametreden bahsetmiyor.

— Kevin Beal

1

Rotaları kullanıyorsanız kontrol cihazınızın adını kontrol edin. Yol tanımındaki denetleyici adı büyük / küçük harfe duyarlıdır.

— Latin Savaşçı

78

İLK. controllertanımladığınız denetleyici isimleriyle aynı yol tanımlarında doğru olup olmadığınızı kontrol edin

communityMod.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/members', {
        templateUrl: 'modules/community/views/members.html',
        controller: 'CommunityMembersCtrl'
      }).
      otherwise({
        redirectTo: '/members'
      });
  }]);

communityMod.controller('CommunityMembersCtrl', ['$scope',
    function ($scope) {
        $scope.name = 'Hello community';
    }]);

Bu örnekteki farklı denetleyici adları hatalara yol açacaktır, ancak bu örnek doğrudur

İKİNCİ JavaScript dosyanızı içe aktarıp aktarmadığınızı kontrol edin:

<script src="modules/community/controllers/CommunityMembersCtrl.js"></script>

— pleerock
kaynak

30

Tecrübelerime göre, "ikinciniz" her zaman problemdir. Denetleyicilerimi sık sıkindex.html

— msanford'a aktarmayı

Benim durumumdaki ikincisiydi, JS dosyasını içe aktarmayı unuttum ...

— Saurabh Misra

26

Aynı hata mesajını aldım (benim durumumda: "Bağımsız değişken 'languageSelectorCtrl' bir işlev değil, tanımsız hale geldi").

Angular seed'in koduyla biraz sıkıcı bir karşılaştırma yaptıktan sonra, daha önce app.js'de denetleyiciler modülüne bir referansı kaldırdığımı öğrendim. ( https://github.com/angular/angular-seed/blob/master/app/js/app.js adresinde bulun )

Ben de şuna sahiptim:

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.directives'])

Bu başarısız oldu.

Ve eksik referansı eklediğimde:

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.controllers', 'MyApp.directives'])

Hata mesajı kayboldu ve Angular, denetleyicileri yeniden algılayabildi.

— bertrand
kaynak

aynı sorunu yaşadım, sorunum denetleyicimi uygulama modülüne eklemeyi unutmamdı ... bu neden otomatik olarak olmuyor ??? yine de teşekkürler!

— TheZuck

16

Bazen bu hata html'de belirtilen iki ng-app yönergenin sonucudur . Yanlışlıkla Benim durumumda ben belirtilen vardı ng-appbenim içinde htmletiketi ve ng-app="myApp"içinde bodyböyle etiketi:

<html ng-app>
  <body ng-app="myApp"></body>
</html>

— Gaurav
kaynak

1

MyApp modülüne enjeksiyon eklemediğimde başıma geldi.

— Ghandhikus

Teşekkür ederim! Bu benim sorunumu çözdü.

— bradden_gross

6

Bu beni ciddiye aldı 4 SAAT (SO'da bitmeyen aramalar dahil) ama sonunda buldum: yanlışlıkla (istemeden) bir yere bir boşluk ekledim.

Onu değerlendirebilir misin?

angular.module('bwshopper.signup').controller('SignupCtrl ', SignupCtrl);

Yani ... 4 saat sonra şöyle olması gerektiğini gördüm:

angular.module('bwshopper.signup').controller('SignupCtrl', SignupCtrl);

Sadece çıplak gözle görmek neredeyse imkansız.

Bu, revizyon kontrolünün (git veya her neyse) ve birim / regresyon testinin hayati önemini vurgulamaktadır.

— Aslan burcu
kaynak

1

Cevabım fazladan bir boşluk değildi ama beni düzeltmeye götürdü. Onun Controlleryerine vardı controllerve tüm gereken buydu.

— Grandizer

Ve dosyama options-moda.controller.js adını verdim ama options-modal.controller.js DOH'u arıyordum!

— theFish

Benimki BundleConfig'e .js eklemeyi unuttuğum içindir. Basit ama sinir bozucu.

— Ege Bayrak

4

Aynı sorunla karşılaştım ve benim durumumda bu sorunun bir sonucu olarak gerçekleşiyordu:

Denetleyicileri ayrı bir modülde ('myApp.controllers' olarak adlandırılır) tanımladım ve ana uygulama modülüne ('myApp' olarak adlandırılır) şu şekilde enjekte ettim:

angular.module('myApp', ['myApp.controllers'])

Bir meslektaşım, başka bir denetleyici modülünü ayrı bir dosyaya itti, ancak benimki ile aynı ada sahip (yani, 'myApp.controllers') bu hataya neden oldu. Sanırım Angular'ın bu denetleyici modülleri arasında kafası karıştı. Ancak, hata mesajı neyin yanlış gittiğini keşfetmede pek yardımcı olmadı.

— Lilla Eli
kaynak

1

Bu, modüldeki ikinci parametre kaldırılarak düzeltilmelidir ... Mevcut modülü, ikinci parametre olmadan angular.module ('myApp') kullanarak almak için. örn. angular.module ('uygulamam']. contoller (...)

— Santhosh

3

Benim durumumda (bir genel bakış sayfası ve bir "ekle" sayfası olması), bunu aşağıdaki gibi yönlendirme kurulumumla aldım. Enjekte edilemeyen AddCtrl için mesaj veriyordu ...

$routeProvider.
  when('/', {
    redirectTo: '/overview'
  }).      
  when('/overview', {
    templateUrl: 'partials/overview.html',
    controller: 'OverviewCtrl'
  }).
  when('/add', {
    templateUrl: 'partials/add.html',
    controller: 'AddCtrl'
  }).
  otherwise({
    redirectTo: '/overview'
  });

when('/'Rota nedeniyle tüm rotalarım genel bakışa gitti ve denetleyici / add rota sayfası oluşturmada eşleştirilemedi. Bu kafa karıştırıcıydı çünkü add.html şablonunu görüyordum, ancak denetleyicisi bulunamadı.

Vaka benim için bu sorunu çözdüğünde '/' rotasını kaldırmak.

— EeKay
kaynak

Bu hatayı da alıyordum ve saçlarımı yırtıyordum çünkü TFS yapılarımın başarısız olmasına neden oluyordu. '/' Rotasını yorumlamak onu benim için de düzeltti. Şimdi nedenini anlamak için!

— Phillip Copley

3

Bir alt modülün içindeyseniz, modülü ana uygulamada bildirmeyi unutmayın. yani:

<scrip>
angular.module('mainApp', ['subModule1', 'subModule2']);

angular.module('subModule1')
   .controller('MyController', ['$scope', function($scope) {
      $scope.moduleName = 'subModule1';
   }]);
</script>
...
<div ng-app="mainApp">
   <div ng-controller="MyController">
   <span ng-bind="moduleName"></span>
</div>

MainApp'ta subModule1'i bildirmezseniz, "[ng: areq] bağımsız değişkeni" MyController "bir işlev değil, tanımsız hale gelir.

— syjust
kaynak

2

Уmed'in ikinci noktası benim tuzağımdı ama sadece kayıt için, belki bir yerde birine yardım ediyordur:

Aynı sorunu yaşadım ve çıldırmadan hemen önce denetleyici komut dosyamı eklemeyi unuttuğumu keşfettim.

Uygulamam ASP.Net MVC'yi temel aldığından , aşağıdaki parçacığı App_Start / BundleConfig.cs dosyama ekleyerek aklımı korumaya karar verdim

bundles.Add(new ScriptBundle("~/app").Include(
                "~/app/app.js",
                "~/app/controllers/*.js",
                "~/app/services/*.js" ));

ve Layout.cshtml'de

<head>
...
   @Scripts.Render("~/app")
...
</head>

Artık dosyaları manuel olarak eklemek zorunda kalmayacağım. Geriye dönüp baktığımda, projeyi oluştururken bunu gerçekten yapmalıydım ...

— Xceno
kaynak

1

Main index.html'de kullandığım LoginController ile mantıklı bir hata aldım. Çözmenin iki yolunu buldum:

$ controllerProvider.allowGlobals () ayarlandığında, bu yorumu Açısal değişiklik listesinde buldum "bu seçenek eski uygulamaları taşımak için kullanışlı olabilir, ancak lütfen yeni uygulamalarda kullanmayın!" Angular için orijinal yorum

app.config (['$ controllerProvider', function ($ controllerProvider) {$ controllerProvider.allowGlobals ();}]);
denetleyiciyi kaydetmenin yanlış yüklenicisi

önce

LoginController.$inject = ['$rootScope', '$scope', '$location'];

şimdi

app.controller('LoginController', ['$rootScope', '$scope', '$location', LoginController]);

"uygulama", app.js'den gelir

var MyApp = {};
var app = angular.module('MyApp ', ['app.services']);
var services = angular.module('app.services', ['ngResource', 'ngCookies', 'ngAnimate', 'ngRoute']);

— Dmitri Algazin
kaynak

1

Aynı hatayı büyük bir hatayla aldım:

appFormid.controller('TreeEditStepControlsCtrl', [$scope, function($scope){

}]);

Anlıyorsun ? İlk $ kapsamı etrafında '' 'yi unuttum, doğru sözdizimi elbette:

appFormid.controller('TreeEditStepControlsCtrl', ['$scope', function($scope){

}]);

Hemen görmediğim ilk hata şuydu: " $ kapsam tanımlanmadı " ve ardından " Hata: [ng: areq] Bağımsız Değişken 'TreeEditStepControlsCtrl' bir işlev değil, tanımsız alındı "

— Elo
kaynak

0

Varlığınızı "" içine almak kadar basit ve içeride alıntı yapılması gereken her neyse "" ile olabilir mi?

<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">

olur

<link rel="stylesheet" media="screen" href="@routes.Assets.at('stylesheets/main.css')">

Bu, ayrıştırmada bazı sorunlara neden olabilir

— Jay Tom
kaynak

0

Bu sorunu çözmek için, açısal yol bildiriminde denetleyicinin adını yanlış yazdığımı keşfetmem gerekti:

.when('/todo',{
            templateUrl: 'partials/todo.html',
            controller: 'TodoCtrl'
        })

— MadPhysicist
kaynak

0

Benim durumumda basit bir yazım hatasıydı index.html:

<script src="assets/javascript/controllers/questionssIndexController.js"></script>

bu olmalıydı

<script src="assets/javascript/controllers/questionsIndexController.js"></script>

sdenetleyicinin adına ekstra olmadan .

— anafor
kaynak

0

Chrome'u burada kullanarak tarayıcının Önbelleği olduğu ortaya çıktı. İnceleme (Öğe) altındaki "Önbelleği devre dışı bırak" seçeneğini kontrol edin, sorunumu çözdü.

— Weihui Guo
kaynak

0

Çünkü şu sorunun cevabını bulmaya çalışırken Google'da belirir: "Hata: Bağımsız Değişken '' bir işlev değil, tanımsız hale geldi".

Aynı modülü iki kez oluşturmaya çalışıyor olabilirsiniz.

Angular.module, AngularJS modüllerini oluşturmak, kaydetmek ve almak için küresel bir yerdir.

Bir bağımsız değişkenin iletilmesi, var olan bir açısal Modül'ü alırken, birden fazla bağımsız değişken iletmek yeni bir açısal modül oluşturur.

Kaynak: https://docs.angularjs.org/api/ng/function/angular.module#overview

Misal:

angular.module('myApp', []) Herhangi bir bağımlılık enjekte etmeden bir modül oluşturmak için kullanılır.

angular.module('myApp') (Bağımsız değişken olmadan) mevcut bir modülü almak için kullanılır.

— MCollard
kaynak

0

Hatanın birçok gerçek nedeni olduğunu gösteren birçok çalışma çözümü var gibi görünüyor .

Benim durumumda denetleyiciyi şu şekilde beyan etmedim app/index.html:

<scipt src="src/controllers/controller-name.controller.js"></script>

Hata gitti.

— Ty Conway
kaynak