AngularJS - ng-Modell undefined in der Steuerung

Question

Ich versuche, ng-Modell von der Steuerung zu lesen, aber ich konnte es nicht funktionieren. Es besagt, dass das ng-Modell nicht definiert ist. Ich versuchte, die von anderen zur Verfügung gestellte Lösung anzuwenden, um dieses ähnliche Problem zu lösen, aber ich konnte es immer noch nicht funktionieren lassen. Vielleicht, weil ich es falsch mache.

Ich habe den folgenden Code-Schnipsel:

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.apply = function() { 
 
    $scope.name = {} 
 
    var firstName = $scope.name.FirstName; 
 
    alert(firstName); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <button ng-click="apply()" type="button">Apply</button> 
 
    Name: 
 
    <input ng-model="name.FirstName"> 
 
</div>

jedoch die Warnung sagt die Variable "vorName" ist nicht definiert, nachdem die Schaltfläche "Anwenden" klicken. Also habe ich stattdessen versucht, den folgenden Code zu verwenden.

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.apply = function() { 
 

 
    var theFirstname = ""; 
 
    $scope.name = { 
 
     theFirstname: $scope.name.FirstName 
 
    } 
 

 
    alert(theFirstname); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <button ng-click="apply()" type="button">Apply</button> 
 
    Name: 
 
    <input ng-model="name.FirstName"> 
 
</div>

Allerdings scheint es, als ob ich nicht in der Lage bin $scope.name.FirstName der Variablen "theFirstname" zuweisen.

Answer 1

Verschieben Sie die Initialisierung von name über apply().

Dadurch kann name.FirstName aus der Vorlage initialisiert werden, da name bereits für den Bereich definiert ist.

In Ihrem Fall ist $scope.name={} im Handler definiert, so nameundefined durch die Zeit ist, wenn ng-model in das Textfeld angebracht ist.

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    // Define the `name` object 
 
    $scope.name = {}; 
 

 
    $scope.apply = function() { 
 
    var firstName = $scope.name.FirstName; 
 
    console.log(firstName); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <button ng-click="apply()" type="button">Apply</button> 
 
    Name: 
 
    <input ng-model="name.FirstName"> 
 
</div>