Angular Scope not working in onclick function

Question

I'm having a problem here where the correct $scope.testMessage is not being passed into QB.chat.send...

Right now what happens when typing new info into the input field tied to $scope.testMessage is an update to the {{testMessage}} in the HTML, which is what we expect, but when punching the button tied to sendMessageClick(), this new value isn't passed into the function -- the old value, here set to "Cheese" is passed into it. Even if it has been changed to "StinkingFrenchCheese" and that is reflected in the {{testMessage}} part on the live HTML. It still only passes "Cheese" to the sendMessageClick.

  $scope.testMessage = "Cheese";
  console.log($scope.testMessage);

  $scope.sendMessageClick = function() {


    console.log("message  = " + $scope.testMessage);

    var user = $rootScope.user;
    console.log('sendMessageclick');
    var countchew = "[email protected]"; //countchew
    var starshipenterprise = "[email protected]"; //starshipenterprise
    if (user == "countchew"){
      QB.chat.roster.confirm(starshipenterprise, function(){
        console.log("roster.confirm called");
      });
      QB.chat.roster.add(starshipenterprise, function() {
        console.log("roster.add called");
      });
      var chewparams = {type: 'chat', name: 'testMessage', body: ($scope.testMessage), extension: {save_to_history: 1}};
      QB.chat.send(starshipenterprise, chewparams);
    } else if (user == "starshipenterprise"){
      QB.chat.roster.confirm(countchew, function() {
        console.log("roster.confirm called");
      });
      QB.chat.roster.add(countchew, function() {
        console.log("roster.add called");
      });
      var starparams = {type: 'chat', name: 'testMessage', body: ($scope.testMessage), extension: {save_to_history: 1}};
      QB.chat.send(countchew, starparams);
    }

  };

<ion-view view-title="Chat">
  <ion-content>

    <center class="padding-vertical">Chat 'em up</center>
      
      <!-- Begin Login Form -->
      <div class="list list-inset">


          <label class="item item-input">
            <input type="text" placeholder="User Name" ng-model="user.username">
          </label>
          <label class="item item-input">
            <input type="text" placeholder="Password" ng-model="user.password">
          </label>
          <button class="button button-full button-balanced" data-ng-click="signInClick()">
           Sign In
          </button>


          <label class="item item-input">
            <input type="text" placeholder="Input your message!" ng-model="inputMessage">
          </label>
          <button class="button button-full button-balanced" data-ng-click="sendMessageClick()">
           Send your message
          </button>
          <button class="button button-full button-balanced" data-ng-click="getCurrentParseUser()">
           Get Current Parse User
          </button>
          <button class="button button-full button-balanced" data-ng-click="QBDisconnect()">
           Disconnect from QB chat
          </button>     


          <p>The message is : {{testMessage}}</p>
          <p>Debug area says : {{debug}}</p>

          <label class="item item-input">
            <input type="text" placeholder="Give some text!" ng-model="testMessage">
          </label>
          <button class="button button-full button-balanced" data-ng-click="sendMessageClick()">
           Send your message
          </button>

       </div>
      <!-- End Login Form -->

  </ion-content>
</ion-view>

I think after running QB.chat events you need to run digest cycle inside there callback.. — Pankaj Parkar
– Pankaj Parkar, Commented Jun 12, 2015 at 17:20
AFAIK QB.chat events are running outside the angular context..so the digest cycle won't get run for them..in order to make binding workable you need to use $scope.$apply() inside each callback function of events that will make it working — Pankaj Parkar
– Pankaj Parkar, Commented Jun 12, 2015 at 17:23
Ah interesting - only problem is there are no callbacks with QB.chat.send - just fire and forget. Do you mean I should put it in the if statement? — realisation
– realisation, Commented Jun 12, 2015 at 17:29
Nope :0 this didn't work. I put it in the top of the sendMessageClick and got an error that apply was already active, then I put it in each of the parts of the if statement, and no error like that, but also same behavior as before — realisation
– realisation, Commented Jun 12, 2015 at 17:38

orcaman · Accepted Answer · 2015-06-12 17:23:19Z

2

Try passing the message to the on click handler:

  <button class="button button-full button-balanced" data-ng-click="sendMessageClick(testMessage)">

Then have your onclick handler receive the new message as the input

  $scope.sendMessageClick = function(msg) {

answered Jun 12, 2015 at 17:23

orcaman

6,58110 gold badges60 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

realisation Over a year ago

I need an option that isn't hardcoded but takes the input from the input field

orcaman Over a year ago

it's not hard coded, testMessage is bound to the input as the model, right?

realisation Over a year ago

yeah I'm getting around to it

realisation Over a year ago

Yeah I Think this will probably work but QuickBlox is being difficult so I can't actually test it right now, but when I do I'll make sure to accept it if it works.

realisation Over a year ago

Actually just realized I can do a console.log of the params which should be enough here you go!

|

Collectives™ on Stack Overflow

Angular Scope not working in onclick function

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related