Notify AngularJS Controller about events from outside

Question

New to Angular so I apologize if the question is silly.

So I'm making an app and one part of it is outside of Angular's "scope" so to speak and this part is responsible for receiving incoming messages (xmpp)

And then there is that Angular controller that has to be notified about incoming messages. What I did is an ugly work around but it works:

view.html:

<button ng-click="refreshLayout()" id="refreshLayoutButton" style="display:none"></button>

controllers.js:

.controller('chatCtrl', function($scope) {
     $scope.refreshLayout = function() { ... }
})

outside.js:

if(incomingMessage) {
     $("#refreshLayoutButton").click();
     // append the message to view.html
}

Is there anyway to exclude jQuery? I want to send the message from outside.js to chatCtrl and then send it to view.html

OR

just notify about the event so it could invoke $scope.refreshLayout (techincally I can append incoming messages directly to view.html using jQuery without Angular, but the first option is still more preferable)

score 2 · Accepted Answer · answered Feb 22 '14 at 22:24

2

You should trigger event when there are incoming messages.

In outside.js use $broadcast when there are incoming messages.

In controller.js wait for that event to happen with $on.

Here's a simple example: http://jsfiddle.net/simpulton/XqDxG/

answered Feb 22 '14 at 22:24

Tome Pejoski

1,582
2
10
34

Thank you for your response. How can I use $broadcast outside where angular is not defined? – luiquao Feb 23 '14 at 00:30
1

I hope this will do the job, without using $broadcast. http://stackoverflow.com/questions/15294565/angular-is-it-possible-to-watch-a-global-variable-i-e-outside-a-scope. – Tome Pejoski Feb 23 '14 at 10:23

score 1 · Answer 2 · edited May 23 '17 at 12:29

... technically I can append incoming messages directly to view.html using jQuery without Angular

I strongly recommend to use Angualrjs only. (For me I would remove jQuery and use only in specific cases in Directives). Angular itself includes jQuery-lite edition within it

New to Angular ...

Please follow this How do I “think in AngularJS” if I have a jQuery background? first, it will make things a bit clearer

So I hope outside.js: from your example means some Directive logic that gets event and need notify controller about.

We can listen on event into Directive and Directive can notify controller by using $eval for example. Here is basic example how $eval works: Demo Fiddle

However (for isolate scope) the other way is just to map event method. Please take a look on THIS example where Google maps notifies controller about zoom change event received.

Notify AngularJS Controller about events from outside

2 Answers2