1

Ich habe diese Dateien binden:kann nicht Umfang Variablen in AngularJS

index.html:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Gestore Anagrafica</title> 
</head> 
<body> 
    <div> 
     <h3>Insert new person</h3> 
     <div ng-app="Person" ng-controller="PersonController"> 
      First Name: <input type="text" ng-model="firstName"><br> 
      Last Name: <input type="text" ng-model="lastName"><br> 
      Age: <input type="number" ng-model="age"><br> 
      <br> 
      Full Name: {{fullName()}} <br> 
      Is major: {{isMajor()}} <br> 
      <button ng-click="add()">Add Person</button> 
     </div> 
    </div> 
    <script type="text/javascript" src="js/angular.js"></script> 
    <script type="text/javascript" src="js/RegistryService.js"></script> 
    <script type="text/javascript" src="js/PersonController.js"></script> 
</body> 
</html> 

js/RegistryService.js:

angular.module('RegistryService', []). 

service('registry', function() 
{ 
    this.people = []; 

    this.add = function(person) 
    { 
     people.push(person); 
    } 
}); 

js/PersonController.js:

var app = angular.module('Person', ['RegistryService']); 
app.controller('PersonController',['registry', function($scope, registry) { 
    $scope.firstName = "testName"; 
    $scope.lastName = ""; 
    $scope.age = 20; 

    $scope.isMajor = function() 
    { 
     return $scope.age > 18; 
    }; 

    $scope.add = function() 
    { 
     registry.add({ 'firstName': $scope.firstName, 
         'lastName': $scope.lastName, 
         'age': $scope.age}); 

    }; 

    $scope.fullName = function() 
    { 
     return $scope.firstName + " " + $scope.lastName; 
    }; 
}]); 

Die Bindung tritt nicht auf: wenn ich Ändern Sie den Namen oder das Alter nichts passiert, außerdem am Anfang die Eingabe sind alle leer, aber ich erwarte, 20 in Alter und testName in firstName zu sehen. Die Browserkonsole zeigt keinen Fehler an. Fehle ich etwas?

Einschränkungen: der Dienst 'RegistryService' muss in einer anderen Datei sein.

Frage: mit diesen beiden Linien

var app = angular.module('Person', ['RegistryService']); 
app.controller('PersonController',['registry', function($scope, registry) { 

i sage ich, dass das Modul mit dem Namen Person etwas braucht genannt RegistryService zu arbeiten, der Controller PersonController die ‚Registrierung‘, was in den RegistryService befinden wird verwenden (Also, wenn ich hier etwas einfügen, das nicht in RegistryService definiert ist, ist ein Fehler). Funktion ($ scope, registry) ist der Konstruktor des Controllers, der eine globale Variable $ scope und die aus 'RegistryService' stammende Variablenregistry verwendet. Ist mein Gesamtverständnis der Abhängigkeitsinjektion gut?

Antwort

2

Sie müssen auch $scope Injektion beschreiben, da man es erwarten in Ihrem Controller Funktion als ersten Parameter zur Verfügung stehen:

var app = angular.module('Person', ['RegistryService']); 
app.controller('PersonController', ['$scope', 'registry', function($scope, registry) { }]); 
1

Sie nicht $ Umfang richtig

app.controller('PersonController',['$scope', 'registry', function($scope, registry) { 
zu injizieren hat