Reacting on changes of a MongoDB Cursor property (Angular-Meteor)

help
1

Hi there,

I don’t know if i titled my question correctly but here is what i want to achieve and what i have so far (simplified as much as possible):

What I have so far:
For each Visitor I create a “Visitor” Object:

{
  name:"Bob",
  mouseX:"31", // The mouseposition is constantly updated
  mouseY:"400", 
  messages:[
    {text:"Message Text",prop:"other property"},
    {text:"Another Message"}
  ]
}

After that I bind the Object to the scope:

$scope.helpers({
  visitor: () => Visitors.findOne({"_id":id})
});

The Messages are shown inside a ng-repeat over the visitor.messages model:
(div) ng-repeat=“msg in visitor.messages”
(span class=“text {{msg.class}}”) {{msg.text}} (/span)
(/div) // html tags seem not to work :smiley:

Another Visitor can send a new Message with:

Visitors.update(
{_id: visitor._id},
  {$push: {messages: {"text":"New Message"}}}
);

What I want to do
When Bob receives a new Message i want to trigger the function newMessageArrived() and to animate the new Message in.

The Problem and what i tried so far

First i tried to use angular:angular-animate package and animate new messages with css-classes but ng-enter triggered for alle messages each time visitor.mouseX was updated and even if nothing other than the messages in the Visitors-Object where pushed still ng-enter triggered for all messages instead only for the new ones.

Thats ok because i guess that the whole DOM is rebuild when the Visitor-Object changes. Now i tried to simply watch the messages prop of the Visitors-Object like:

scope.$watch("visitor.messages", function ( newValue, oldValue ) {
  newMessageArrived()
});

Again newMessageArrived() is triggering with each update to the Visitors-Object. Of course i could catch this stupidly with something like checking the length of the messages array but in my understanding even using $watch without this is wrong already.

The Question
So what is the Angular-Meteor way of reacting on changes in a property of a MongoDB Cursor (Object)?

Please consider my examples are extremly simplified to focus on my problem but also i am new to Meteor and not even very experienced in Angular. Also this is for a “proof of concept” project and not for any commercial or professional context, so security, performance and maintainability are not as crucial as usual.

Thanks for your time and hopefully for any help

2

I found a solution I guess.

Uringo from Angular-Meteor explained in another similar question on Github:

@gooor this is how Meteor’s autorun works. it executes on every change
on any reactive thing inside it and a Meteor cursor is a reactive
object. If you want to re-run something only when field is changing
you can use Angular’s $watch:

$scope.$watch('field', function(){   console.log('calling');  
this.foos = Foos.find({field: this.field}); });

In my particular case I needed to add true as the third parameter to the $watch function. Therefore newMessageArrived() is only called when the property messages is changed.

So my initial concerns where wrong but when someone has a better, more meteorish solution i would appreciate.