jqxNotification with AngularJS: Databinding does not work

[baderaParticipant]

There seems to be a bug in jqxNotification used with AngularJS or at least in the example.
Please look at the example:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/#demos/jqxangular/notification.htm

If we click “Check mail”, the notification “You have new messages” is displayed. However, if we look at the source, I think that it is intended to display “You have 2 new messages”. There is something wrong with the databinding.

I need to be able to set the text of the notification, before I open it – if the example would work, I would also be able to do what I am up to do.

Thanks in advance for your help,
badera

[DimitarParticipant]

Hello badera,

Thank you for your feedback. This is just an issue with the example. You would have to change:

You have <b>{{data.length}}</b> new messages.

to

You have <b>{{notifications.length}}</b> new messages.

and the notification will correctly display “You have 2 new messages.”

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[baderaParticipant]

Thank you Dimitar for the feedback and that you have already fixed the online example. As I see, you also removed the “jqx-data” attribute from the jqx-notification directive, which surly makes sense (I wondered about it).

However, I still have a question:
Why does you open the notification with
$scope.notificationSettings.apply('open');

Why does this work? I mean, notificationSettings does not have a function apply assigned in the assignment in the controller:

$scope.notificationSettings = {
   width: "auto", position: "top-right", opacity: 0.9, 
   closeOnClick: true, autoClose: false, showCloseButton: true, template: "mail" }

Can you explain that? (Yes, I am newbie…)

For me, the logical way would be: Assign a jqx-instance attribute, then invoke the method open of this object. But this seems not to work; the notification is opened but always empty.

MyApp.controller("notificationController", function ($scope) {
    $scope.notificationtext = 'notification...';

    // jqy-notification instance will be point to $scope.notif later...
    $scope.notif = {};

    $scope.openNotification = function (text)
    {
        $scope.notificationtext = text;
        $scope.notif.open();
    };

    $scope.notificationSettings = {
        width: "auto",
        position: "bottom-right",
        opacity: 0.9,
        browserBoundsOffset: 20,
        closeOnClick: false,
        autoClose: true,
        autoCloseDelay: 5000,
        showCloseButton: false,
        template: "info"//, blink: true
    }
});

HTML:

<div ng-controller="notificationController">
    <button ng-click="openNotification('hello world!')">Open...</button>
    <jqx-notification jqx-instance="notif" jqx-settings="notificationSettings">
        <div>{{notificationtext}}</div>
    </jqx-notification>
</div>

Thanks in advance!
badera

[DimitarParticipant]

Hi badera,

Please read about how the integration of jQWidgets with AngularJS is implemented here: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs.htm. Your question about apply is answered in the section Widget configuration.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts