爲什麼消息不能在數組中推送？

我正在使用AngularJS v1.6.0-rc.2。我正在製作一個模式化的聊天框，我發現了一個主要問題。我想知道爲什麼當我點擊一個按鈕'發送'這樣的消息不能被推入到一個數組中。我假設該郵件是作爲「發件人」發送的。爲什麼消息不能在數組中推送？

查看

<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>

型號&控制器

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

來源

2016-11-30 Joshua Atmadja

創建plunker http://plnkr.co/，那麼我們很容易調試你的代碼。 – Afsar

得到任何錯誤？ –

我想你已經搞砸了一些地方的代碼丟失括號。修復它首先 – Aravind

這裏是他的工作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>

來源

2016-11-30 06:45:41 Aravind

是的我也試着修復這些....我有一些像你這樣的疑惑....首先，爲什麼會出現錯誤「 angular.js：12798 TypeError：definition.match在angular.js中不是函數：7268「和 –

相同。他的指令中有些事情出錯了。 – Aravind

感謝您的幫助。是的，實際上它是可點擊的。當你點擊它時，它假設顯示彈出聊天框。仍然存在一個主要問題。沒有文本框和按鈕「發送」在那個笨蛋。 –

爲什麼消息不能在數組中推送？

回答

相關問題