AngularJS not evaluating data inside brackets

Question

I am facing a rather strange issue with AngularJs. I have an AngularJS (AJS henceforth) application which is listening to certain SignalR hubs. When a SignalR hub receives a message (and the data object is passed in that call too), it fires an event in AJS which in turn shows a Toastr on the UI.

Now I have around 5 different types of SignalR hubs that initiate different Toasts on the UI.

I added another Toast (as per the new requirement) which is initiated by yet another SignalR hub.

Problem: This new toast that I have implemented does show up when the SignalR hub receives a message, but the data is not rendered. What I mean is that the toast shows up with {{ }} these brackets.

Other toasts are following the same routine and are showing up just fine, except for the new one.

The strangest part is that I have another AJS method running at an interval of around 30 seconds that fetches some count values from the database (using WEB API in the background). And when this action completes the {{ }} disappear and the values show up just fine (I keep the toastr alive for that while by keeping my mouse cursor over it, or else it will disappear).

    //SignalR hub initiates the following method
    $scope.$on("on_remote_event", function (argEvent, argData) {
        var toastrHtml = "<div class='my-toast-style'><div class='myLabel'>Client : {{ argData.ClientName }}</div><div class='myLabel'>Order Date: {{ argData.OrderedOn | date:'MM/dd/yyyy hh:mm a' }} EST</div></div>";
        generateAlertToast(toastrHtml, "Order Info", argData);
    });


    //this method will generate the toast as per the information passed to it
    function generateAlertToast(toastrHtml, toastrTitle, argData) {
        toastr.options = {
            "closeButton": true,
            "newestOnTop": true,
            "progressBar": true,
            "preventDuplicates": true,
            "timeOut": 60000,
            "positionClass": "toast-bottom-right"
        }

        var scope = $rootScope.$new();
        scope.argData = argData;
        //console.info(scope.argData);
        var compiledHtml = $compile(toastrHtml)(scope);
        toastr.info(compiledHtml, toastrTitle);
    };

Now I know that somehow AJS is not evaluating the html for the toastr. But how and where is the problem is what i am banging my head against!!

Please help.

Look into what ``toastr.info()`` does with ``compiledHtml``. Maybe pass ``angular.element(toastrHtml)`` instead of raw string. Maybe call ``$digest()`` manually after linking to make sure the view is updated. [Docs](https://docs.angularjs.org/api/ng/service/$compile). — Anton Strogonoff, Sep 23 '15 at 17:18
Anton the problem here is that there are other toastr notifications and they are working fine with same coding. I have around 5 different toastr methods that again call the generateAlertToast method to render the contents, and others are working fine ... its just the new one that i implemented above that is not working !! — Shrewdroid, Sep 24 '15 at 13:29

score 0 · Accepted Answer · answered Sep 24 '15 at 14:45

So sorry guys!!

It was my stupid mistake that I made in the SignalR side code due to which the above mentioned code was not working.

Basically when I broadcast the message received from SignalR I forgot to enclose the broadcasting line in the rootscope apply.

$rootScope.$apply(function () {
    //broadcast event here
});

And since I did not write the rootscope apply, AJS was not able to run the digest cycle and hence was waiting for me or some other method to initiate the digest cycle and evaluate the values on the UI.

Lesson Learnt. Thank you :)

AngularJS not evaluating data inside brackets

1 Answers1