仅在单击按钮后才渲染用户消息和响应

Question

我正在构建一个小型聊天应用程序，该应用基于用户触发的一些预定义的消息和响应来模拟对话。当用户从列表中选择一个人的名字时，将会显示一条消息。当用户键入消息时，不应该显示在单击发送按钮之前。用户发送响应后，应用程序应在2秒后从消息数组发送预定义的响应。

带有指令的控制器

var chatApp = angular.module("chatApp",['firebase']);
chatApp.controller("chatController",function($scope, $firebaseArray){
  var myUsers = new Firebase('https://chat-4477b.firebaseio.com/users');
   $scope.users = $firebaseArray(myUsers);
    $scope.messages = [{
        user:"aleksandra",
        message:"Aleksandra: this is aleksandras message",
        response:"a response from aleksandra",
        showDetails: false
      },
      {
        user:"evan",
        message:"Evan: this is evan message",
        response:"a response from evan",
        showDetails: false
      },
      {
        user:"tom",
        message:"Tom: this is toms message",
        response:"a response from tom",
        showDetails: false
      },
      {
        user:"jarid",
        message:"Jarid: this is jarids message",
        response:"a response from jarid",
        showDetails: false
      }];
      $scope.sendMessage = function(response){
        $scope.response = [];
        $scope.response.push(response);
        console.log(response);
      };
});
chatApp.directive("usersList", function(){
    return {
        restrict: "E",
        scope: false,
        template: "<p>Users</p>"+
            "<ol class='list-unstyled animated fadeInDown'>"+
              "<li ng-repeat='message in messages'>"+
                "<a ng-click='toggleDetails(message)'>{{message.user}}</a>"+
              "</li>"+
            "</ol>"
        ,
        link: function(scope) {
          scope.toggleDetails = function(message)
          {
            angular.forEach(scope.messages, function(value, key){
              if(message != value)
                value.showDetails = false;
            });
            message.showDetails =  !message.showDetails;
          }
        }
    }
});
chatApp.directive("messagesList", function(){
    return {
        restrict: "E",
        scope: false,
        template: "<div class='panel panel-primary'>"+
            "<div class='panel-heading'>"+
                "<span class='glyphicon glyphicon-comment'></span> Chat</div>"+
            "<div class='panel-body body-panel'>"+
              "<ol class='list-unstyled'>"+
                "<li ng-repeat='message in messages | filter:{showDetails:true}'>"+
                    "<p>{{message.message}}</p>"+
                "</li>"+
                "<p>Matt: {{response}}</p>"+
                "<p>{{messages.response}}</p>"+
              "</ol>"+
            "</div>"+
            "<div class='panel-footer clearfix'>"+
              "<form name='form'>"+
                "<input type='text' name='message' ng-model='response' class='form-control' />"+
                "<span class='col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-12' style='margin-top: 10px'>"+
                    "<button class='btn btn-warning btn-lg btn-block' id='btn-chat' ng-click='sendMessage(messages)' ng-disabled='!form.message.$dirty'>Send</button>"+
                "</span>"+
              "</form>"+
            "</div>"+
        "</div>"
        };
});

在当前状态中，该应用程序正在加载消息，但是当用户键入响应时，由于在消息框中设置了{{response}}，它会自动显示。我正在尝试获取它，以仅在单击时显示响应：

$scope.sendMessage = function(response){
    $scope.response = [];
    $scope.response.push(response);
    console.log(response);
};

应该由以下触发：ng-click='sendMessage(messages)'

但是，当前状态在键入提交之前在聊天框中显示消息，尽管它应该来自$scope.response = [];数组，请单击。

我尝试使用这样的超时函数：

  function chatApp($timeout, $scope){
      $scope.sendMessage = function(response){
        $timeout(function(){
        $scope.response = [];
        $scope.response.push(response);
        console.log(response);
      }, 2000);
    };
  }

但没有任何影响。

因此回顾一下：应用程序加载当前用户名称和一个空的提示。当用户单击右侧的名称时，名称将在聊天框中显示，以及预定义的初始消息。当用户输入响应时，响应应仅在用户键入发送按钮时在聊天记录中显示。在同一函数中，应该有一个超时会触发预定义的响应，以显示2秒后显示。我一直坚持如何防止响应显示直到用户击中发送，允许超时函数运行并显示后期的预定响应。

这是当前状态的plunker： link

Answer 1

我发现我需要像这样简化函数并在将消息推到响应数组后立即触发超时。

$scope.sendMessage = function(){
      $scope.response.push($scope.chat);
      $timeout(function () {
        $scope.autoresponse = "This is a great app!";
      }, 3000);
  };