0

I'm new to angular.js, and the $scope is not working in the function, which is inside the controller....

 <div>{{logMsg}}</div> <script type="text/javascript"> angular.module("app",[] ).controller("myController", function($scope){ $scope.onConnect = function(status){ $scope.logMsg = "connecting..."; } function onMessage(msg) { console.log('message'); $scope.logMsg = "message..."; } }); </script>

The connecting... is displayed, but the message... is not displayed. But I received the the message in the console. What is i'm doing wrong. Thanks in advance.

Improve this question
6
  • 3
    how is onMessage being called? Chances are $scope is (ironically) not in scope. Commented Aug 31, 2016 at 8:33
  • I think @Jamiec is correct. $scope.logMsg in onMessage function is not within the scope of the controller. Commented Aug 31, 2016 at 8:35
  • 1
    From where are you calling on onMessage()? Commented Aug 31, 2016 at 8:36
  • actually i'm dealing with xmpp, from there it's calling it.. the console is working and not the $scope Commented Aug 31, 2016 at 8:40
  • Please add (at least some of) that code to the question? Just need to see the execution flow. Commented Aug 31, 2016 at 8:42

4 Answers 4

Reset to default
2

$scope in this case, is out of scope

<script type="text/javascript"> angular.module("app",[] ) .controller("myController", function($scope){ <- scope of $scope is from here $scope.onConnect = function(status){ $scope.logMsg = "connecting..."; } }); <- to here function onMessage(msg) { console.log('message'); $scope.logMsg = "message..."; <- no $scope here } </script>

Solution is write onMessage the same way of onConnect. Or assign $scope to another variable which is not recommended.

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

1 Comment

Where do you call onMessage?
2

If you want to use $scope you better inject it using the "array" notation

angular.module("app",[] ).controller("myController", ['$scope', function($scope){

Not sure how would you expect the $scope to exist , The function is out of the controller and $scope not injected into the onMessage function.

Maybe you meant onMessage to be in the controller, or call it from the controller passing the $scope?

Improve this answer

5 Comments

You don't have to specify injection like that when you are using inbuilt injections like $scope in dev mode - It is good practice, but unless you activate strict mode, it wont changes the anything in context of the question
Oh but yes, you are right doesn't seem to be the problem
Fixed to answer the problem
I really don't think this is an injection problem. Nothing would work if that was the case, but it is just a callback that is not updating the scope properly.
yap I saw my mistake and updated the answer before. but also nitpicking on injection, since without it minification might be broken and he'll be back here
1

Your $scope.logMsg in onMessage is not within the scope of your controller. See correction below.

 angular.module("app", []).controller("myController", ['$scope',function($scope) { $scope.logMsg = ""; $scope.onConnect = function(status) { $scope.logMsg = "connecting..."; } $scope.onMessage = function(msg) { console.log('message'); $scope.logMsg = "message..."; }; }]);
Improve this answer

3 Comments

How are you calling the function? if you wish to call onMessage in this example from within your controller you will need to do this... $scope.onMessage('message here!');. If it is called from a view then you will need to add ng-click='onMessage("message here!")'
actually i'm dealing with xmpp, from there it's calling it.. the console is working and not the $scope
I'm not familar with xmpp. As for an angular/javascript answer, this is correct.
1

You need to inject $scope to onMessage function to get the reference of $scope. In this case $scope is available only withing the scope of controller method and not inside onMessage method.

angular.module("app",[] ).controller("myController", function($scope, $timeout){ $scope.onConnect = function(status){ $scope.logMsg = "connecting..."; } $scope.onConnect(); $timeout(onMessage($scope), 2000); }); function onMessage($scope) { return function(msg){ console.log('message'); $scope.logMsg = "message..."; } }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="myController">{{logMsg}}</div>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.