Bind to data outside of a directive

[bojanbass]

Hi there,

I have one problem when using your framework. I my app I have a store of data which is updated very frequently through websockets on the client side. The first and the most basic idea was to bind the objects from the store directly to UI widgets, which should refresh automatically. Now things got complicated, also because of Angular.

At the first stage, the store only executed a callback when item was added or removed from the store, because if the data was only updated, it should be updated directly on UI also. But the way data model works here is that I have to set dataAttrName to some property, which is then updated from the store.

Example:

        var marketWidget = {
            name: 'MarketWidget',
            directive: 'agg-market',
            dataAttrName: 'market', 
            dataModelType: MarketDataModel
        };

inside MarketDataModel I listen to any add/remove from the store and set:
this.market = dataFromStore;

in directive I bind to:

            scope: {
                market: '=',
            },

and in link function I have to watch for changes:

scope.$watchCollection('market', function () {
...
});

The first problem is that the market object is just a different one from the store, so we have to add $watchCollection to watch for changes. Because the data is huge and it changes frequently, watch seemed like an overhead. And it also doesn't recognise update of an object.

First I had to watch for updates from the store, because JS object was not the same, so I added a new listener inside MarketDataModel for updates and just rewrite this.market object.
But because $watchCollection was slow I added a new dummy property to a model called marketChange, which is just incremented INT value when add/update/delete is called. Then inside a directive I replaced $watchCollection with a new watch function:

scope.$watch('marketChange', function (newVal, oldVal) {
...
});

but this solution seems to be ugly and also not optimal. So my question is, is there any way to bind some object from outside the widget directly and when this object updates, can we refresh UI without adding watchers to a directive??

I have also big performance problems, because when I add more than 10 widgets witch not so much data, I quickly get > 2000 watchers set up by angular. Even if i skip rendering my own data in the widget, it seems like your framework adds quite a lot of watchers into the scope. Is this the right thinking and do you have a solution regarding performance? On of my crazy ideas was to use ReactJS for rendering inside Angular :)

Thank you in advance!

[andyperlitch]

@bojanbass sorry for the late response. I think finding a good solution really depends on how the market data is being used in your widget. For example, if it is in an array and its being put in an ng-repeat in your widget, you shouldn't really need a $watch in the link function... simply ensure that you have an appropriate track by clause in your ng-repeat statement.

If you are still working on this problem, could you provide a little more detail as to what your widget is doing?