CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-controller
user2721874
user2721874

Reputation:

Angular binding model in scope issue?

Hi I am new to the angular js and trying to write the chat application using the socket io and angular js with ionic for android platform. But in my chat page there is one issue. I am trying to bind the textbox to the $scope.message variable using ng-model but it is not getting bind as the test when i show the same variable value in page itself it works as it is but in controller i gets value as undefined or empty

index.html 

  <body ng-app="farmApp" ng-controller="farmAppController" > 
    <ion-content>
      <ul id="Messeges">
          <li class="right">Welcome to Chat</li>
          <li ng-repeat="chatMessage in messages">
              {{chatMessage}}
          </li>
      </ul>
          <form ng-submit="sendMessage()">
           <input placeholder="Your message" ng-model="message"> 

            <input type="submit" name="send" id="send" value="Send" class="btn btn-success">
              <br/>
              {{message}} //This updates the value as i type in textbox 
              </form>
  </ion-content>
 </body>

but when i see print that model on console it shows undefined when i define at the start in controller then it shows empty value

Controller.js

   var farmAppControllers = angular.module('farmAppControllers',[]);


   farmAppControllers.controller('farmAppController',['$scope','socket',function($scope,socket){
         $scope.messages = [];
         $scope.message = ''; //When i don't declare then console shows undefined on sendMessage function if declared then empty
         socket.on("update", function (data) {
             console.log(data);
             $scope.messages.push(data);
         });

        $scope.sendMessage = function (){
              console.log($scope);
              console.log($scope.message); // This shows undefined or empty on console
              socket.emit("msg",$scope.message);
               $scope.messages.push($scope.message);
               $scope.message ='';
        };
   }]);

My app.js

  'use strict';

  var farmApp = angular.module('farmApp', ['farmAppControllers','farmAppServices','ionic']);

And services.js for socket wrapper

  var farmAppServices = angular.module('farmAppServices',[]);


  farmAppServices.factory("socket",function($rootScope){
      var socket = io.connect();
      return {
       on:function (eventName,callBack){
        socket.on(eventName,function(){
            var args = arguments;
            $rootScope.$apply(function(){
                callBack.apply(socket,args);
            });
         });
       },
      emit:function(eventName,data,callBack){
        socket.emit(eventName,data,function(){
            var args = arguments;
            $rootScope.$apply(function(){
                if(callBack){
                    callBack.apply(socket,args);
                }
            });
        });
      }
    };
 });

i stuck here... i try to google it but not able to solve it. In case of confusion feel free to comment. Any help would be great.

UPDATE

When i used the first answer of this question the problem got solved but still not clear why ng-submit is not working ? Any Idea Why ? Because it seems i am still unable to update the view scope from the controller ?

Upvotes: 4

Views: 4295

Answers (1)

Marcel Gwerder
Marcel Gwerder

Reputation: 8520

I think the problem is <ion-content> which is a directive and seems to create its own scope. From the docs:

Be aware that this directive gets its own child scope. If you do not understand why this is important, you can read https://docs.angularjs.org/guide/scope.

Therefore your message property isn't in the scope of your controller. Objects are passed by reference and sendMessage is a function respectively an object, thats why it's still called correctly from the child scope.

What you should do is create an object with a name that makes sense to "package" the properties you want to share.

$scope.package = {} 
$scope.package.messages = [];
$scope.package.message = 'You default message...';

And then in your function:

$scope.package.messages.push($scope.package.message);

And in your template:

<input placeholder="Your message" ng-model="package.message">

Here is a plunker with a working solution. It throws some random errors, I actually don't know ionic. But the example works and everything else doesn't matter.

Upvotes: 3

Related Questions