Angular binding model in scope issue?

Question

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 ?

Issue is raised here http://forum.ionicframework.com/t/problem-with-ion-content-and-scope-vars-inside-function/1811/2 — , May 24 '14 at 14:56

Marcel Gwerder · Accepted Answer · 2014-05-24T14:51:06.100

3

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.

edited May 24 '14 at 14:51

answered May 24 '14 at 14:15

Marcel Gwerder

8,353
5
35
60

But in ng-repeat i am getting the `messages` without any problem and even the `ng-submit` action `sendMessage` is also get call without mentioning the `$parent` – May 24 '14 at 14:20
Thanks i found it out it was as you said the `` creating its own scope i found the issues listed there and solution also thanks for help. – May 24 '14 at 14:52
I've added a better solution than `$parent`. You can access `messages` in `ng-repeat` because it simply creates it in the scope of `ion-content`. I also mentieoned why you can call `sendMessage` in my answer. – Marcel Gwerder May 24 '14 at 14:53
Yes got it thanks mate. i have attached the link of there forum please accept if someone in future wants reference. Thanks again . – May 24 '14 at 14:54
No problem. I think it's the same as in my answer so I'll leave it like it is. – Marcel Gwerder May 24 '14 at 14:55

Angular binding model in scope issue?

1 Answers1