Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it L'avatar di ubisum
    Registrato dal
    Mar 2007
    Messaggi
    22

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

    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.

  2. #2
    Utente di HTML.it
    Registrato dal
    Feb 2011
    residenza
    Firenze
    Messaggi
    255
    Correggo direttamente all'interno del codice che hai postato, fammi sapere se funziona o meno!

    Quote Originariamente inviata da ubisum Visualizza il messaggio
    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!
    Ultima modifica di Fix87; 14-09-2017 a 21:10 Motivo: Link modificato

  3. #3
    Utente di HTML.it L'avatar di ubisum
    Registrato dal
    Mar 2007
    Messaggi
    22
    Perfetto, ora va tutto.
    Grazie.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.