AngularJS hatası: '' FirstCtrl 'bağımsız değişkeni bir işlev değil, tanımsız hale geldi'

Question 1

Aynı sorunun burada birkaç kez sorulduğunu fark ettim, çözmeyi denedim ama hiçbir şey yardımcı olmuyor.

Bu öğreticiyi egghead videoları ile takip ediyorum.

Ancak Denetleyiciler ve Denetleyiciler arasında veri paylaşımı bölümüne geldiğimde, onu çalıştıramıyorum.

Chrome ile çalıştırdığımda, konsolda şu hatayı alıyorum:

'FirstCtrl' bağımsız değişkeni bir işlev değil, tanımsız hale geldi '.

Gerçekten sorunun ne olduğunu bilmiyorum. Kod, öğreticideki ile aynıdır.

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

Html'nizde 2 adsız ng-appdirektifiniz var .
Bölümünüzdeki birini kaybedin.

Güncelle
Farklı bir yaklaşım deneyelim.
Js dosyanızda bir modül tanımlayın ve ng-appyönergeyi ona atayın . Bundan sonra, denetleyiciyi basit bir işlev olarak değil, bir ng bileşeni gibi tanımlayın:

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

ve js kısmı:

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

İşte tam da bunu yapan çevrimiçi bir demo: http://jsfiddle.net/FssbL/1/

Question 3

Tam olarak aynı hata mesajını aldım ve benim durumumda denetleyici JS dosyasını (örn. First-ctrl.js) index.html dosyamda listelemedim

Question 4

Bu öğreticiyi az önce yaptım ve @ gion_13 cevabını takip ettim. Hâlâ işe yaramadı. Dizindeki ng-app adımı js dosyamdakiyle aynı yaparak çözdüm. Alıntılar bile tamamen aynı. Yani:

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

ve js:

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

Ng-uygulamasının aynı olması gerektiği tuhaf ama ng-denetleyicisinin olmaması.

Question 5

Sen senin adını gerekirng-app , uygulamanızı veren ad; sadece kullanmak ng-app yeterli değildir .

Onun yerine:

<html ng-app>
...

Bunun yerine bunun gibi bir şeye ihtiyacınız olacak:

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

Sonra da şöyle:

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

Question 6

Bir başka güzel: Modülleri yanlışlıkla yeniden tanımlamak. Bugün biraz fazla hevesle bir şeyler kopyaladım / yapıştırdım ve bir yerde bir modül tanımına sahip oldum, denetleyici tanımlarımla geçersiz kıldım:

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

Daha sonra tanımlarımda, ona şu şekilde gönderme yapmam gerekiyordu:

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

Bunun yerine yaptığım şey şuydu:

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

Aramadaki ekstra ayracı not edin angular.module.

Question 7

ng-app = "" öğesini kaldırmak

<div ng-app="">

ve basitçe yap

<div>

Question 8

Ben de aynı sorunla karşılaştım. Ancak sorun, modülü ng-uygulamasının bağlı olduğu modüller listesinde listelemeyi unutmuş olmamdı.

Question 9

Bu sorunla karşılaştım ve aşağıdaki şekilde düzeltildi:

ilk önce ng-app'i şuradan kaldırın:
```
<html ng-app>
```
ng-app adını benimApp'a ekle:
```
<div ng-app="myApp">
```

bu kod satırını işlevden önce ekleyin:

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

betiğin son görünümü:

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

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

Question 10

Benim durumumda, bu mesaj ana modüldeki unutulmuş bağımlılık enjeksiyonundan geliyor

Question 11

Bu, açısal uygulama kodunuzu birden fazla kez eklemek için yanlış yapılandırılmışsa olabilir. Benim durumumda, bu index.js içindeydi ve onu js dosyalarının dizininin bir parçası olarak (gulp içinde globbed) denetleyici bildirimlerimden önce ve sonra ekliyordu. Index.js için küçültülmemesi ve ikinci kez enjekte edilmemesi için bir dışlama ekledikten sonra uygulamam çalışmaya başladı. Yukarıdaki çözümlerden herhangi biri sorununuzu çözmezse başka bir ipucu.

Question 12

İlk olarak - Modül adı tanımlanmamışsa, JS'de modüle erişemez ve denetleyiciyi ona bağlayamazsınız.

Açısal modüle modül adını sağlamanız gerekir. tanımlama modülünün kullanımında da bir fark var 1. angular.module ("firstModule", []) 2. angular.module ("firstModule")

1 - Biri, ikinci argümanlara bağımlılık eklenmeden yeni "firstModule" modülünü bildirmektir. 2 - Bu, başka bir yerde başlatılan ve başlatılmış modülü almaya ve üzerinde değişiklik yapmaya çalışan "ilk modül" ü kullanmak içindir.

Question 13

Bu sorunla karşılaştım ancak denetleyiciyi yeniden adlandırarak bu sorunu çözebildim, lütfen bir deneyin.

ctrlSub.execSummaryDocuments = function(){};

Question 14

bazen işlevin içindeki kodun sözdizimindeki yanlış bir şey bu hatayı atar. İşlevinizi doğru bir şekilde kontrol edin. Benim durumumda, Json alanlarını değerlerle atamaya çalışırken ve iki nokta üst üste kullanarak: eşit işareti yerine atama yapmak için = ...

Question 15

İki farklı javascript dosyasında aynı adı taşıyan iki denetleyicim vardı. Bu açısallığı tahriş etmek, bir ad alanı çakışmasına işaret eden daha net bir hata mesajı veremez.

Question 16

Bu eğitimden emin değilim, ancak dosyayı grunt / yudum küçültme sürecine dahil etmeyi unuttuğumda aynı sorunu yaşadım.

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

Umarım yardımcı olur.

Question 17

Mektup kasanıza da dikkat edin. Bu böceğin peşinden iyi bir saat geçirdim.

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

denetleyiciyi adlandırırken

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

Hepsi tutarlı bir şekilde adlandırılmalıdır, bu durumda Forgot p wdController küçük harf p ile.