Question

我有一个简单的表格：

<form ng-submit='addMessage()'>
    <input type='text' ng-model='chatMessage' placeholder='chat here' />
    <input type='submit' value='chat' />
</form>

此刻，一个非常简单的功能：

$scope.addMessage = function() {
    console.log($scope.chatMessage);
}

无论我在输入框中输入什么内容，控制台日志记录都只是记录未定义的。很明显，我错过了一些东西，但我不确定那是什么。

Answer 1

根据表单的使用方式，有时$scope在表单上的控制器之间脱离了上下文。这是因为addMessage()和chatMessage不在$scope层次结构的同一级别。

解决此问题的一种方法是为表单项创建容器：

$scope.cont = {};
$scope.addMessage = function() {
    console.log($scope.cont.chatMessage);
}

以表格形式：

<input type="text" ng-model="cont.chatMessage" placeholder="chat here"/>

如果您打算使用更多角度，这也是您应该阅读的内容：http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

Answer 2

这应该有效：

<form ng-submit='addMessage(chatMessage)'>
   <input type='text' ng-model='chatMessage' placeholder='chat here' />
   <input type='submit' value='chat' />
</form>

在你的控制器中：

$scope.addMessage = function(msg) {
    console.log(msg);
}

<强>更新

基于您的评论，我认为您正在寻找类似的内容：

        $scope.messages = [];

        $scope.$watch('messages', function(newMessage) {
            alert('hey, a message was added ! :' +newMessage);
        }, true);

        $scope.addMessage = function(msg) {
            $scope.messages.push(msg);
        };

Angular有所谓的监视，每当新的消息被添加到数组时，监视的函数将触发。有关手表的更多信息，请参阅docs

Answer 3

寻找 fiddle ，也许你错过了不同的东西。

<div ng-app="app">
    <div ng-controller="mainCtrl">
<form ng-submit='addMessage()'>
    <input type='text' ng-model='chatMessage' placeholder='chat here' />
    <input type='submit' value='chat' />
</form>
        <pre>{{msg | json}}</pre>
    </div>
</div>

JS：

var app = angular.module("app", []);

app.controller("mainCtrl", function ($scope) {

    $scope.msg = [];

    $scope.addMessage = function () {

        $scope.msg.push($scope.chatMessage);
        console.log($scope.chatMessage);
        $scope.chatMessage = "";


    }

});

无法通过表单提交数据

3 个答案: