jQuery UI Widgets Forums Dialogs and Notifications Tooltip, Notification, Popover jqxNotification with AngularJS: Databinding does not work

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 5 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • badera
    Participant

    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


    Dimitar
    Participant

    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/


    badera
    Participant

    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


    Dimitar
    Participant

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.