La valeur de la zone de texte AngularJS renvoie undefined

Question

Lorsque j'appuie sur le bouton, je veux imprimer la valeur de ma zone de texte dans ma console. Mais ma zone de texte renvoie un indéfini. Il semble que tout le code fonctionne parfaitement, je l'ai fait de la même manière qu'un autre code que j'ai utilisé auparavant, mais cela ne fonctionne pas maintenant.

Ceci est mon code html:

<form class="form-horizontal">  
    <input type="text" ng-model="add" ng-model-instant><button class="btn" ng-click="order()"><i class="icon-plus"></i>Order!</button> 
</form> 

Ceci est mon script:

angular.module('MyApp', []). 
config(function($routeProvider) { 
    $routeProvider. 
     when('/boeken', {templateUrl:'partials/boeken.html', controller:BoekenCtrl}). 
     when('/orders', {templateUrl:'partials/orders.html', controller:OrderCtrl}). 
     when('/home', {templateUrl:'partials/home.html', controller:HomeCtrl}). 
     otherwise({redirectTo:'/home'}); 
}); 

//BoekenCtrl 

//HomeCtrl 

function OrderCtrl($rootScope) {  
    $rootScope.order = function() { console.log($rootScope.add); $rootScope.add = "";  }; 
} 

Pourquoi est-ce que ma zone de texte est non défini?

Answer 1

Au lieu

function OrderCtrl($rootScope) {  
$rootScope.order = function() { console.log($rootScope.add); $rootScope.add = "";  }; 
} 

utilisation:

function OrderCtrl($scope) {  
$scope.order = function() { 
    console.log($scope.add); 
    $scope.add = ""; 
}; 
} 

Étant donné que votre formulaire existe sous OrderCtrl, vous devez utiliser $scope dans OrderCtrl contrôleur pour récupérer les données. Mais, bien sûr, vous pouvez stocker après dans $rootScope

S'il vous plaît, voir l'exemple Fiddle