Javascript AngularJS $scope.variable 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28317997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS $scope.variable is undefined
提问by fuczak
Pardon my newbiness but I can't figure it out. Why is my $scope.new_prompt undefined when clicking submit form? I can see the variable being updated as I type (in <p>{{new_prompt}}</p>) but when I click submit, console logs 'undefined'.
原谅我的新手，但我想不通。为什么单击提交表单时我的 $scope.new_prompt 未定义？我可以看到变量在我输入（输入<p>{{new_prompt}}</p>）时被更新，但是当我点击提交时，控制台记录“未定义”。
View:
看法：
<div class="panel" ng-if="isAuthenticated()">
<div class="panel-body">
<h2 class="text-center">Add a prompt</h2>
<form method="post" ng-submit="submitPrompt()" name="promptForm">
<div class="form-group has-feedback">
<input class="form-control input-lg" type="text" name="prompt" ng-model="new_prompt" placeholder="Imagine if..." required autofocus>
<span class="ion-edit form-control-feedback"></span>
</div>
<p>{{new_prompt}}</p>
<button type="submit" ng-disabled="promptForm.$invalid" class="btn btn-lg btn-block btn-success">Add prompt</button>
</form>
</div>
</div>
Controller:
控制器：
angular.module('Prompts')
.controller('HomeCtrl', ['$scope', '$auth', 'Prompt', '$alert', '$rootScope',
function($scope, $auth, Prompt, $alert, $rootScope) {
$scope.isAuthenticated = function() {
return $auth.isAuthenticated();
};
$scope.submitPrompt = function() {
console.log($scope.new_prompt);
Prompt.submitPrompt({
idea: $scope.new_prompt,
user: $rootScope.user
}).then(function() {
$alert({
content: 'Prompt has been added',
animation: 'fadeZoomFadeDown',
type: 'material',
duration: 3
});
});
};
$scope.stories = [{
prompt: 'Prompt 1',
author: 'blank',
upvotes: 0
}, {
prompt: 'Prompt 2',
author: 'klanb',
upvotes: 1
}, {
prompt: 'Prompt 3',
author: 'balbunk',
upvotes: 2
}, ];
}
]);
edit:
编辑：
Ved's solution got it working. Now I don't understand why it had to be done like that when this works:
Ved 的解决方案使它起作用。现在我不明白为什么它在工作时必须这样做：
<div class="panel">
<form ng-submit="printText()">
<input type="text" ng-model="justTest">
<button type="submit" class="btn"></button>
</form>
</div>
$scope.printText = function() {
console.log($scope.justTest)
};
Working example of edit: http://jsfiddle.net/fuczak/dLcLkycb/
编辑的工作示例：http: //jsfiddle.net/fuczak/dLcLkycb/
EDIT 2:
编辑2：
The problem lies within ng-if directive. It creates own child scope, and that's where 'new_prompt' is located, not in the parent HomeCtrl scope.
问题在于 ng-if 指令。它创建自己的子作用域，这就是“new_prompt”所在的位置，而不是在父 HomeCtrl 作用域中。
采纳答案by Ved
There are two ways to solve your mistake.
case 1: Pass your model as a parameter to function:
有两种方法可以解决您的错误。
情况 1：将您的模型作为参数传递给函数：
HTML:
HTML：
<form method="post" ng-submit="submitPrompt(new_prompt)" name="promptForm">
JavaScript:
JavaScript:
$scope.submitPrompt = function(data) {
$scope.new_prompt=data;
console.log($scope.new_prompt);
Prompt.submitPrompt({
idea: $scope.new_prompt,
user: $rootScope.user
}).then(function() {
$alert({
content: 'Prompt has been added',
animation: 'fadeZoomFadeDown',
type: 'material',
duration: 3
});
});
};
CASE 2: Define: scope.new_prompt= {},inside your controller
案例 2：定义：scope.new_prompt= {},在您的控制器内部
