CODEWITHSUNDEEP
angularjswebsocketmodal-dialog
Kavipriya
Kavipriya

Reputation: 441

Error: ng:areq Bad Argument Argument 'msgController' is not a function, got undefined

I am new to angularJS and I couldn't understand why this error is coming. Please help find where I have done mistake.

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

If I didn't use msgController, the dialog box is opening. when I include this, the error is shown and couldn't open the dialog box.

Upvotes: 0

Views: 238

Answers (1)

Gangadhar Jannu
Gangadhar Jannu

Reputation: 4414

Because you are referencing the msgController in openConfirm method of ngDialog and you didn't define it.

ngDialog.openConfirm({
    template: 'chatBox.html',
    controller: 'msgController',
    scope: $scope //Pass the scope object if you need to access in the template
})

In addition to that you have specified msgController in chatSocket module and you are using it in MyApp module which is why you are getting the error.

You need to specify the chatSocket as dependency to MyApp module and define the msgController on MyApp module like blow:

var app = angular.module('MyApp', ['ngDialog','chatSocket']);

app.controller('msgController', function ($scope, socket) {
$scope.socket = socket;
$scope.submit = function () {
    socket.send($scope.msgbox);
};  
});

Upvotes: 1

Related Questions