web-dev-qa-db-fra.com

TypeError: dbg n'est pas défini dans angularjs

Je suis en train d'apprendre angularjs et de suivre le tutoriel de - ici

Voici mon index.jsp -

<!doctype html>
<html lang="en" ng-app="phoneCatApp">
<head>
<title>Angular Example</title>
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="app/js/controllers.js"></script>
</head>
<body ng-controller="phoneListCtrl">
    Search : -
    <input ng-model="query"/> Sort by:
    <select ng-model="orderProp">
        <option value="name">Alphabetical</option>
        <option value="age">Newest</option>
        <option value="-age">Oldest</option>
    </select>
    <p>Total number of phones: {{phones.length}}</p>
    <ul>
        <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"><span>{{phone.name}}</span>
            <p>{{phone.snippet}}</p></li>
    </ul>
</body>
</html>

cette version de controller.js fonctionne -

var phonecatApp = angular.module('phoneCatApp', []);
    phonecatApp.controller('phoneListCtrlOld', function($scope) {
        $scope.phones = [ {
            'name' : 'Nexus S',
            'snippet' : 'Fast just got faster with Nexus S.',
            'age' : 1
        }, {
            'name' : 'Motorola XOOM™ with Wi-Fi',
            'snippet' : 'The Next, Next Generation tablet.',
            'age' : 2
        }, {
            'name' : 'Motorola XOOM™',
            'snippet' : 'The Next, Next Generation tablet.',
            'age' : 3
        } ];
        $scope.orderProp = 'age';
    });

mais dans la prochaine étape, j'ai essayé d'aller chercher ces données JSON avec un appel ajax afin que le contrôleur ressemble à ceci -

var phonecatApp = angular.module('phoneCatApp', []);
phonecatApp.controller('phoneListCtrl', function($scope, $http) {
    $http.get('app/js/phones.json').success(function(data) {
        $scope.phones = data;
    });
    $scope.orderProp = 'age';
});

Mais cela me donne l'erreur suivante -

TypeError: dbg n'est pas défini. debuggerLib.js (ligne 530)

Je peux voir dans firebug que l’appel ajax se passe avec le code 304 non modifié. et je peux voir les données en réponse. mais le type de contenu de réponse n'est pas JSON.

S'il vous plaît examiner et dire quel est le problème? Est-ce que je manque un fichier js à inclure ou quelque chose d'autre.

10
Ravi Kumar

J'ai eu cette même erreur, et après un peu de grattage de tête trouvé a cause. Je ne peux pas être sûr qu'il s'agisse de votre même cause.

Redémarrer Firefox, redémarrer le PC, supprimer Firebug, réinstaller, optimiser, exécuter un registre propre, etc. - rien n’a aidé. J'ai eu une erreur dans la ligne 556 de debuggerLib.js, dbg n'étant pas défini.

Cependant, il s’avère que j’ai installé Firebug à l’époque, et cela a créé un répertoire dans mon profil Roaming:

C:\Users\Leonardo\AppData\Roaming\Mozilla\Firefox\Profiles\Leonardo.Serni\firebug

Il y a beaucoup de fichiers JSON dans ce répertoire, mais aucun n’est daté aujourd’hui, c’est-à-dire quand j’ai supprimé et réinstallé Firebug. Je me suis donc demandé: "Et si le new Firebug charge quelque chose de obsolète à partir de ce répertoire?".

J'ai fermé Firefox, renommé le répertoire de "firebug" en "bugfire", rouvert Firefox.

Firebug fonctionne parfaitement et l’erreur a disparu . J'avais fait la même chose sans renommer le répertoire et l'erreur ne disparaissant pas, je suis convaincu que mon hypothèse était correcte.

Le répertoire a été recréé, mais il ne contient plus que deux fichiers - "annotations.json" et "breakpoints.json", tous deux d'une taille de 0 octets. Peut-être qu'un jour j'essaierai d'ajouter les fichiers de l'ancien répertoire pour voir quand l'erreur se reproduira.

Mise à jour (grâce au commentaire de DevNull)

Peut-être qu'il n'est pas nécessaire de détruire le répertoire en entier. Vérifiez que le fichier annotations.json a une longueur nulle. Si ce n'est pas le cas, renommez-le simplement en annotations.old tant que Firefox n'est pas en cours d'exécution.


Je commence à suspecter que la dbg est en fait déboguant Firebug lui-même , et nous ne l’avons pas défini car nous ne sommes pas des développeurs Firebug. Cela n'a rien à voir avec le débogueur Firebug qui débogue nos scripts.

11
LSerni

Vous utilisez probablement FireFox avec Firebug activé.
Éteignez Firebug et votre problème disparaîtra.

J'ai eu le même problème, les autres navigateurs n'ont eu aucun problème et la console a montré l'erreur venant de debuggerLib.js (ligne 556). La désactivation a supprimé l'erreur et a permis à mon application de s'exécuter comme prévu.

3
paul

Essayez ceci, Initialisez d'abord la valeur du tableau JSON est vide.so initialisez

    $scope.phones = '';
1
Vasanth

utilisez cette balise HTML de tête de code.

  <base href="/">

....

1

L'explication de @LSerni semble correcte. Pour les systèmes Linux, supprimez simplement et réinstallez votre plugin Firebug. Le système supprime automatiquement tous les fichiers/dossiers associés et les recrée. Cela a fonctionné pour moi.

1
Suyash Tilhari

L'erreur que vous rencontrez est avec votre fichier JSON. Ça devrait ressembler à ça:

       [{
            "name" : "Nexus S",
            "snippet" : "Fast just got faster with Nexus S.",
            "age" : 1
        }, {
            "name" : "Motorola XOOM™ with Wi-Fi",
            "snippet" : "The Next, Next Generation tablet.",
            "age" : 2
        }, {
            "name" : "Motorola XOOM™",
            "snippet" : "The Next, Next Generation tablet.",
            "age" : 3
        }]

Rappelez-vous les crochets.

Utilisez.thenplutôt que .success. Il s'agit d'une version améliorée de .success, qui gère plus efficacement tous les rappels et tous les appels. Il ramène toute la promesse et vous la résolvez en référençant la partie .data, à savoir, response.data

$http.get('app/js/phones.json').then(function(response) {
        $scope.phones = response.data;
    });

DEMO - Utilisation de .success

DEMO - Utiliser .then promise

0
Conrad Lotz

Vous utilisez le nombre, veuillez donc utiliser un nombre ou une valeur d'analyse pour numéroter l'exemple ci-dessous.

<code>
   var myApp = angular.module('MyApp',[]);
    myApp.controller("myController",function($scope){
        $scope.width=50;
        $scope.height=50;
    });
</code>
0
Pankaj Chauhan