Directive and stream real time data

[JORDY David]

Hi all,

I created a directive and I would like to update my directive with a real time stream as a stock exchange.

Do you know how can I do it ?

I tried in my directive scope with a  value : '=' and in my HTML {{value}} but it's not a good way I guess.

Any idea ?

Thanks

[JORDY David]

This directive is added to HTML page dynamicaly.

[Sander Elias]

Hi Jordy,

How are you delivering your stream to the browser?
This should be done in a service, and your directive can $watch this service,
or you service can notify subscribers.

BTW, a isolated scope with a value ‘=’ should not receive an {{value}} expresion from your template, but
a scope or controller property like my-attribute="propertyName" in your HTML/template

Regards
Sander

​

[JORDY David]

I already have a service for data in real time. This service populate an HTML table with a ng-repeat directive. When my mouse is hover a table row my custom directive should display same data as my table row with more details.

Custome directive

angular.module('TEST').directive('helloWorld', function() {

        return {

            restrict: 'AEC',

            replace: 'true',

            template: '<p ng-click="select()">Hello World!! {{streamData}}</p>',

            link: function (scope, element, attrs) {   

                scope.streamData = scope.$parent.models[scope.rowIndex].StreamData;

                

                scope.$watch(attrs.streamData, function(items) {

                });

            }

        };

    });

Controller

$scope.onMouseEnter = function ($event, index) {

        $scope.rowIndex = index;

        var coords = getMouseEventResult($event, "Mouse move");

        var newElement = $compile('<div id="screenshot"> <hello-world name="row.StreamData" rowIndex="$scope.rowIndex" /></div>')($scope);

        angular.element(document.body).append(newElement);

        

        $("#screenshot")

            .css("top", (coords.y - xOffset) + "px")

            .css("left", (coords.x + yOffset) + "px")

        .fadeIn("fast");

    };

I removed  the isolate scope

Thanks for your help

[JORDY David]

I found a way but I don't know if it's  the best manner:

On my controller

$scope.$broadcast('streamData', ......);

On my Directive

                scope.$on('streamData', function (event, args) {

                    scope.streamData = args.streamData

                });

Any advices ?

[Sander Elias]

Hi Jordy,

Well, it is a way. I don't know if its the best way in your situation, without seeing the rest of the code.

Regards

Sander

[JORDY David]

My directive works fine but when I add this directive dynamicaly on my web page I lost all the binding !!!!