![](/img/trans.png)
[英]$scope.variable is undefined in browser console while form submit AngularJs
[英]AngularJS $scope.variable is undefined
請原諒我的新意,但我不知道。 為什么單擊提交表單時我的$ scope.new_prompt沒有定義? 我可以看到在輸入時(在<p>{{new_prompt}}</p>
)正在更新的變量,但是當我單擊“提交”時,控制台日志為“未定義”。
視圖:
<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>
控制器:
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
}, ];
}
]);
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)
};
編輯的工作示例: http : //jsfiddle.net/fuczak/dLcLkycb/
問題出在ng-if指令之內。 它創建自己的子作用域,而這是“ new_prompt”所在的位置,而不是父HomeCtrl作用域。
有兩種方法可以解決您的錯誤。
情況1:將模型作為參數傳遞給函數:
HTML:
<form method="post" ng-submit="submitPrompt(new_prompt)" name="promptForm">
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
});
});
};
案例2:在控制器內部定義: scope.new_prompt= {},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.