Angular JS: visualizzate i nomi delle variabili di scope, ma non il loro valore

**ubisum** · 12-09-2017, 11:47

salve a tutti.
ho realizzato un controller usando Angular JS in un file module.js:

codice:

var module = angular.module("initModule", []);

module.controller(
'pageController', 
function($scope)
{
    $scope.heroesList = 
    [
        {
            name: 'Robert Downey Jr.',
            character: 'Tony Stark / Iron Man'
          },
          {
            name: 'Chris Evans',
            character: 'Steve Rogers / Captain America'
          },
          {
            name: 'Mark Ruffalo',
            character: 'Bruce Banner / The Hulk'
          },
          {
            name: 'Chris Hemsworth',
            character: 'Thor'
          },
          {
            name: 'Scarlett Johansson',
            character: ''
          },
          {
            name: 'Jeremy Renner',
            character: 'Natasha Romanoff / Black Widow'
          },
          {
            name: 'Tom Hiddleston',
            character: 'Clint Barton / Hawkeye'
          },
          {
            name: 'Clark Gregg',
            character: 'Loki'
          },
          {
            name: 'Clark Gregg',
            character: 'Agent Phil Coulson'
          },
          {
            name: 'Cobie Smulders',
            character: 'Agent Maria Hill'
          },
          {
            name: 'Stellan Skarsgård',
            character: 'Selvig'
          },
          {
            name: 'Samuel L. Jackson',
            character: 'Nick Fury'
          },
          {
            name: 'Gwyneth Paltrow',
            character: 'Pepper Potts'
          },
          {
            name: 'Paul Bettany',
            character: 'Jarvis (voice)'
          },
          {
            name: 'Alexis Denisof',
            character: 'The Other'
          },
          {
            name: 'Tina Benko',
            character: 'NASA Scientist'
          }
    ];
});

Successivamente, ho scritto una pagina HTML che dovrebbe sfruttare il controller e le variabili in esso definite per realizzare una tabella:

codice:

<html>
   <head>
      <title>Table of heroes</title>
      <script type="text/javascript" src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>      
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>      
      <script type="text/javascript" src="module.js"></script>

      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
      
   </head>
   <body>
         <h2>{{titleString}}</h2>
      <div ng-app = "mainApp" ng-controller = "pageController">
         
            <table border = "0">
               <tr>
                  <th>Name</th>
                  <th>Character</th>
               </tr>

               <tr ng-repeat="hero in heroesList">
                  <td>{{hero.name}}</td>
                  <td>{{hero.character}}</td>
               </tr>
            </table>
      </div>
            
   </body>
</html>

Tuttavia, la tabella contiene una sola riga e non con i valori delle variabili in $scope, ma proprio con le stringhe {{hero.name}} e {{hero.character}}.
Stessa cosa per quanto è incluso fra i tag <h2>.
Ispezionando tramite la console di Chrome, si scopre il seguente errore:

codice:

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=mainApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.14%2F%24injector%2Fnomod%3Fp0%3DmainApp%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A6%3A417%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A412%0A%20%20%20%20at%20a%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A53)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A296%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A35%3A46%0A%20%20%20%20at%20s%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A7%3A302)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A34%3A399)%0A%20%20%20%20at%20ab%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A38%3A135)%0A%20%20%20%20at%20d%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)%0A%20%20%20%20at%20tc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A18%3A179)
    at angular.js:38
    at angular.js:4120
    at s (angular.js:323)
    at g (angular.js:4081)
    at ab (angular.js:4007)
    at d (angular.js:1445)
    at tc (angular.js:1466)
    at Jd (angular.js:1360)
    at angular.js:26176
    at HTMLDocument.a (angular.js:2744)
(anonymous) @ angular.js:38
(anonymous) @ angular.js:4120
s @ angular.js:323
g @ angular.js:4081
ab @ angular.js:4007
d @ angular.js:1445
tc @ angular.js:1466
Jd @ angular.js:1360
(anonymous) @ angular.js:26176
a @ angular.js:2744
c @ angular.js:3014

Sapreste aiutarmi?
Grazie.

**Fix87** · 14-09-2017, 21:03

Correggo direttamente all'interno del codice che hai postato, fammi sapere se funziona o meno!

Originariamente inviata da ubisum

salve a tutti.
ho realizzato un controller usando Angular JS in un file module.js:

codice:

var module = angular.module("mainApp", []);

module.controller(
'pageController', function pageController($scope)
{
    $scope.titleString = 'My Heores!';
    $scope.heroesList = 
    [
        {
            name: 'Robert Downey Jr.',
            character: 'Tony Stark / Iron Man'
          },
          {
            name: 'Chris Evans',
            character: 'Steve Rogers / Captain America'
          },
          {
            name: 'Mark Ruffalo',
            character: 'Bruce Banner / The Hulk'
          },
          {
            name: 'Chris Hemsworth',
            character: 'Thor'
          },
          {
            name: 'Scarlett Johansson',
            character: ''
          },
          {
            name: 'Jeremy Renner',
            character: 'Natasha Romanoff / Black Widow'
          },
          {
            name: 'Tom Hiddleston',
            character: 'Clint Barton / Hawkeye'
          },
          {
            name: 'Clark Gregg',
            character: 'Loki'
          },
          {
            name: 'Clark Gregg',
            character: 'Agent Phil Coulson'
          },
          {
            name: 'Cobie Smulders',
            character: 'Agent Maria Hill'
          },
          {
            name: 'Stellan Skarsgï¿½rd',
            character: 'Selvig'
          },
          {
            name: 'Samuel L. Jackson',
            character: 'Nick Fury'
          },
          {
            name: 'Gwyneth Paltrow',
            character: 'Pepper Potts'
          },
          {
            name: 'Paul Bettany',
            character: 'Jarvis (voice)'
          },
          {
            name: 'Alexis Denisof',
            character: 'The Other'
          },
          {
            name: 'Tina Benko',
            character: 'NASA Scientist'
          }
    ];
});

Successivamente, ho scritto una pagina HTML che dovrebbe sfruttare il controller e le variabili in esso definite per realizzare una tabella:

codice:

<!DOCTYPE html>
<html ng-app="mainApp">
   <head>
      <title>Table of heroes</title>
      <script type="text/javascript" src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>      
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>      
      <script type="text/javascript" src="module.js"></script>

      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
      
   </head>
   <body ng-controller="pageController">
         <h2>{{titleString}}</h2>
      <div>
         
            <table border = "0">
               <tr>
                  <th>Name</th>
                  <th>Character</th>
               </tr>

               <tr ng-repeat="hero in heroesList">
                  <td>{{hero.name}}</td>
                  <td>{{hero.character}}</td>
               </tr>
            </table>
      </div>
            
   </body>
</html>

Tuttavia, la tabella contiene una sola riga e non con i valori delle variabili in $scope, ma proprio con le stringhe {{hero.name}} e {{hero.character}}.
Stessa cosa per quanto ï¿½ incluso fra i tag <h2>.
Ispezionando tramite la console di Chrome, si scopre il seguente errore:

codice:

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=mainApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.14%2F%24injector%2Fnomod%3Fp0%3DmainApp%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A6%3A417%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A412%0A%20%20%20%20at%20a%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A53)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A296%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A35%3A46%0A%20%20%20%20at%20s%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A7%3A302)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A34%3A399)%0A%20%20%20%20at%20ab%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A38%3A135)%0A%20%20%20%20at%20d%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)%0A%20%20%20%20at%20tc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A18%3A179)
    at angular.js:38
    at angular.js:4120
    at s (angular.js:323)
    at g (angular.js:4081)
    at ab (angular.js:4007)
    at d (angular.js:1445)
    at tc (angular.js:1466)
    at Jd (angular.js:1360)
    at angular.js:26176
    at HTMLDocument.a (angular.js:2744)
(anonymous) @ angular.js:38
(anonymous) @ angular.js:4120
s @ angular.js:323
g @ angular.js:4081
ab @ angular.js:4007
d @ angular.js:1445
tc @ angular.js:1466
Jd @ angular.js:1360
(anonymous) @ angular.js:26176
a @ angular.js:2744
c @ angular.js:3014

Sapreste aiutarmi?
Grazie.

Così dovrebbe andare, fammi sapere!

**ubisum** · 15-09-2017, 15:32

Perfetto, ora va tutto.
Grazie.

Discussione: Angular JS: visualizzate i nomi delle variabili di scope, ma non il loro valore

Strumenti discussione

Ricerca discussione

Visualizza

Angular JS: visualizzate i nomi delle variabili di scope, ma non il loro valore

Permessi di invio