仅在单击按钮后才呈现用户消息和响应

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);
  };