function - AngularJS 文本框值返回未定义

Question

当我按下按钮时，我想在控制台中打印文本框的值。但是我的文本框返回一个未定义的。似乎所有代码都运行良好，我的做法与我之前使用的其他代码相同，但现在无法正常运行。

这是我的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>

这是我的脚本：

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 = "";     };
}

为什么我的文本框未定义？

Answer 1

反而

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

采用：

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

由于您的表单存在于 下OrderCtrl，因此您需要使用$scopeintoOrderCtrl控制器来获取任何数据。但是，当然，您可以将其存储在$rootScope

请参阅Fiddle中的示例