Question

我正在使用AngularJS v1.6.0-rc.2。我正在制作一个类似模态的聊天框，我发现了一个主要问题。我想知道为什么当我点击一个按钮时，该消息不能被推入数组中发送＆＃39;像这样。我假设邮件以＆＃34; sender＆＃34;。

的形式发送

查看

<html>
<head>
<!-- I've included the script, CSS file, and fonts -->
</head>
<body ng-app='ModalDemo'>    
<div ng-controller='MyCtrl'>
<b ng-click='toggleModal()'><label>username</label></b>
<modal-dialog show='modalShown' width='250px' height='370px'>
  <name>
    <span>username</span>
  </name><hr>

 <content>
    <div width=100% ng-repeat='message in messages'>
      <div ng-if='message.u==1'><span class='sender'>{{message.m}}</span></div>
      <div ng-if='message.u==0'><span class='receiver'>{{message.m}}</span></div>
    </div><span class='sender'>{{textmsg}}</span>
 </content>
</modal-dialog>
</div>
</body>
</html>

型号＆amp;控制器

<script>
var app = angular.module('ModalDemo',[]);
app.directive('modalDialog', function() {
  return {
    scope: {
      show: true;
    },
    replace: true,
    transclude: {
        'name': '?name',
        'content': '?content'
    },
    link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      if (attrs.width)
        scope.dialogStyle.width = attrs.width;
      if (attrs.height)
        scope.dialogStyle.height = attrs.height;
      scope.hideModal = function() {
        scope.show = false;
      };
    },
    template: "<div class='ng-modal' ng-show='show'>\n\
               <div class='ng-modal-overlay' ng-click='hideModal()'></div>\n\
               <div class='ng-modal-dialog' ng-style='dialogStyle'>\n\
               <div class='ng-modal-name' ng-transclude='name'></div>\n\
               <div class='ng-modal-close' ng-click='hideModal()'>_</div>\n\
               <div class='ng-modal-dialog-content' ng-transclude='content'></div>\n\
               <div class='ng-modal-textbox'>\n\
               <input class='textinput' ng-model='textmsg'>
               <button ng-click='send()' class='send'>Send</button>\n\
               </div></div></div>"
  };
});

app.controller('MyCtrl', ['$scope', function($scope) {
  $scope.modalShown = false;
  $scope.toggleModal = function() {
    $scope.modalShown = !$scope.modalShown;
  };

  $scope.messages=[
      {'m':'hi','u':1},
      {'m':'hello', 'u':1},
      {'m':'is it username?', 'u':1},
      {'m':'yeah!','u':0}];

  $scope.send = function(){
      $scope.messages.push(
              {'m':$scope.textmsg, 'u':1 }
      );
      $scope.textmsg="";
  };
}]);
</script>

如果需要，这是我的CSS文件的 CSS

.ng-modal-overlay {
  position:absolute;
  z-index:9999;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#000000;
  opacity: 0.0;
}
.ng-modal-dialog {
  z-index:10000;
  position: fixed;
  width: 50%;
  bottom: 0px;
  left: 75%;
  box-shadow: 1px 1px 2px #000000;
  background-color: #fff;

}
.ng-modal-dialog-content {
  text-align: left;
  overflow-y: scroll;
  height: 300px;
  width:100%;
}
.ng-modal-close {
  position: absolute;
  top: 3px;
  right: 5px;
  padding: 3px 6px;
  cursor: pointer;
  font-size: 120%;
  display: inline-block;
  font-weight: bold;
  font-family: 'arial', 'sans-serif';
  color: white;
}
.ng-modal-name{
    background:#4A86E8;
    padding:10px;
    color: white;
}
.ng-modal-textbox{
    width:100%;
    height: 25px;
    border-top: 1px solid black;
    bottom:0px;
    position:absolute;
}
.send{
    background: #4a86e8;
    border: 0;
    font-size: 1em;
    color: white;
    float: right;
    height:inherit;
    font-family: 'Montserrat';
}
.textinput{
    width: 185px;
    font-size: 1em;
    border: 0;
    padding-left: 3px;
}
.sender{
    float: right;
    margin:8px;
    padding: 5px 8px;
    border-radius: 6px;
    font-family: arial;
    background: #8eb5f2;
    box-shadow: 1px;
    color: white;
    font-size: 0.8em;
    box-shadow: 1px 1px 6px #000;
    max-width: 60%;
}
.receiver{
    float:left;
    margin:8px;
    padding: 5px 8px;
    border-radius: 6px;
    font-family: arial;
    box-shadow: 1px;
    color: black;
    font-size: 0.8em;
    background: #eaebed;
    box-shadow: -1px 1px 6px #000;
    max-width: 60%;
}

Answer 1

这是他的问题的工作PLUNKER 我已经解决了所有的错误，但是事情一切正常。一切顺利，你在这里错过了很多括号，这些括号使你的代码混乱。

return {
    scope: {
      show: true,
      replace: true,
      transclude: {
        'name': '?name',
        'content': '?content'
      },
    link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      if (attrs.width)
        scope.dialogStyle.width = attrs.width;
      if (attrs.height)
        scope.dialogStyle.height = attrs.height;
      scope.hideModal = function() {
        scope.show = false;
      };
    },

您的推送

var obj= {
      'm':$scope.textmsg,
      'u':1
      }

      $scope.messages.push(obj);

请告诉我你在这个HTML中点击切换的地方，你认为它是可点击的吗？

<b ng-click="toggleModal()">
        <label>username</label>
</b>

为什么消息不能被推入阵列？

1 个答案: