How to get access to AngularJS in Jquery?

Question

Recently I have begun to integrate AngularJS in project. Before I have written many prototypes and single functions in JavaScript, for example (Node.js + socket.io functionality).

Today I a have trouble communicating AngularJS with clear JavaScript:

JS:

socket.on('message', function (data) {
     showSystemMessage();
}

function showSystemMessage(message) {
     // Increment here AngularJS $scope.messagesCnt++ ?;
}

AngularJS:

.controller('MessagesController', ['$scope', function($scope) {
    $scope.messagesCnt = 0;
}])

HTML:

<div>{{messagesCnt}}</div>

Please, attention to method: showSystemMessage()

are you getting any errors? is the showSystemMessage() defined in the angular file? else it won't have access to $scope — painotpi
– painotpi, Commented Mar 30, 2015 at 6:40

Manish Kr. Shukla · Accepted Answer · 2015-03-30 06:52:08Z

2

Ideally, You should follow what @Yaseer has said, but i see, that you're using Socket IO native implementation [No angular Wrapper around].

Hence, you have two solutions :

Use Angular Socket IO
Access Angular Controller from the native javascript :

For this you must have an element with an identifier ID. then you can use the id to access the associated scope.

angular.element("#your-identifier-id-here").scope().messagesCnt++;

answered Mar 30, 2015 at 6:52

Manish Kr. Shukla

4,4771 gold badge22 silver badges35 bronze badges

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

Comments

Vikrant Mahajan · Accepted Answer · 2015-03-30 06:53:54Z

0

Write your socket listener code inside controller

function appcontroller($scope){

   socket.on('message', function (data) {
    showSystemMessage();
   }

   function showSystemMessage(message) {
      $scope.$apply(function(){
      // Increment here AngularJS $scope.messagesCnt++ ?;
    });
   }
}

answered Mar 30, 2015 at 6:53

Vikrant Mahajan

5353 silver badges8 bronze badges

Comments

Yasser Shaikh · Accepted Answer · 2015-03-30 06:43:56Z

0

If you function showSystemMessage is outside the controller scope, there is no way you can update the scope variable messagesCnt. (There are but not straight forward.)

Instead this function of yours should reside in an angular service instead, and then on whatever event you want you could broadcast a message from your service to your controller to update its count value.

answered Mar 30, 2015 at 6:43

Yasser Shaikh

47.9k50 gold badges208 silver badges289 bronze badges

Collectives™ on Stack Overflow

How to get access to AngularJS in Jquery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related