Question

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

带指令的控制器

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秒后显示的预定义响应。我一直坚持如何在用户点击发送之前保持响应显示，允许超时功能运行并在之后显示预定义的响应。

以下是当前状态的摘要： LINK

Answer 1

我发现我需要简化这样的功能，并在将消息推送到响应数组后立即触发超时。

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

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

1 个答案: