我是angularJS的新手,我无法理解为什么会出现这个错误。请帮忙找出我做错的地方。
的index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>Angular JS Web-Socket</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="js/chat.js"></script>
<script src="lib/ngDialog.js"></script>
<link rel="stylesheet" type="text/css" href="css/ngDialog-theme-default.css">
<link rel="stylesheet" type="text/css" href="css/ngDialog.css">
<body>
<button ng-controller="MainCtrl" ng-click="openChatBox()">Open</button>
</body>
</html>
chatBox.html
<script src="lib/ngDialog.js"></script>
<script src="lib/angular-websocket.js"></script>
<script src="js/socket.js"></script>
<link rel="stylesheet" type="text/css" href="css/ngDialog.css">
<link rel="stylesheet" type="text/css" href="css/chat.css">
<!-- The Modal -->
<div id="myModal" class="modal" ng-app="chatSocket">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<div class="menu">
<div class="name">Bot</div>
<div class="close">Close</div>
</div>
</div>
<div class="modal-body" ng-controller="msgController">
<h2>Modal body</h2>
<label ng-repeat="item in socket.msg">
Name : {{item.name}} <br>
Msg : {{item.msg}}
</label>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
<form ng-submit="submit()">
<input type="text" ng-model="msgbox">
<button id="sendMsg" type="submit" >Send Message</button>
</form>
</div>
chat.js
var app = angular.module('MyApp', ['ngDialog']);
app.controller('MainCtrl', function ($scope, ngDialog) {
$scope.openChatBox = function() {
ngDialog.openConfirm({template: 'chatBox.html',
scope: $scope //Pass the scope object if you need to access in the template
}).then(
function(value) {
//You need to implement the saveForm() method which should return a promise object
$scope.closeChat().then(
);
},
function(value) {
//Cancel or do nothing
}
);
};
});
socket.js
angular.module('chatSocket', ['ngWebSocket'])
.factory('socket', function ($websocket) {
// Open a WebSocket connection
var ws = $websocket("ws://" + document.location.host + document.location.pathname);
var msg = [];
ws.onMessage(function (event) {
console.log('message: ', event.data);
var response;
try {
response = event.data;
} catch (e) {
console.log('error: ', e);
}
msg.push({
name: "Bot",
msg: response,
});
});
ws.onError(function (event) {
console.log('connection Error', event);
});
ws.onClose(function (event) {
console.log('connection closed', event);
});
ws.onOpen(function () {
console.log('connection open');
ws.send('HELLO SERVER');
});
return {
msg: msg,
status: function () {
return ws.readyState;
},
send: function (message) {
console.log(message);
msg.push({
name: "User",
msg: message,
});
ws.send(message);
}
};
})
.controller('msgController', function ($scope, socket) {
$scope.socket = socket;
$scope.submit = function () {
socket.send($scope.msgbox);
};
});
如果我没有使用msgController
,则会打开对话框。当我包含它时,会显示错误,并且无法打开对话框。
答案 0 :(得分:1)
因为您引用了msgController
的{{1}} openConfirm
方法,而您没有定义它。
ngDialog
除此之外,您已在ngDialog.openConfirm({
template: 'chatBox.html',
controller: 'msgController',
scope: $scope //Pass the scope object if you need to access in the template
})
模块中指定了msgController
,并且您正在chatSocket
模块中使用它,这就是您收到错误的原因。
您需要将MyApp
指定为chatSocket
模块的依赖关系,并在MyApp
模块上定义msgController
,例如打击:
MyApp