jQuery UI Widgets Forums Dialogs and Notifications Tooltip, Notification, Popover Notification with AngularJS does not update

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 7 months ago.

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

  • Aram
    Participant

    Hi there,
    in the Notification with AngularJS example the text does not update directly. For example

    <!DOCTYPE html>
    <html ng-app="demoApp">
    <head>
        <title id="Description">jqxNotification directive for AngularJS</title>
        <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
        <script type="text/javascript" src="../../scripts/angular.min.js"></script>
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxnotification.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            var demoApp = angular.module("demoApp", ["jqwidgets"]);
            demoApp.controller("demoController", function ($scope) {
                $scope.notifications =
                [
                    {
                        name: "Ken",
                        about: "Appointment",
                        message: "Just wanted to remind you dinner is at 8pm tonight at Carl's."
                    },
                    {
                        name: "Sue",
                        about: "Shopping",
                        message: "Here's the shopping list for tommorow's party: Wine, Tomatoes, Cheese, Popcorn"
                    }
                ]
    
                // jqxNotification's settings.
                $scope.notificationSettings = {
                    width: "auto", position: "top-right", opacity: 0.9, 
                    closeOnClick: true, autoClose: false, showCloseButton: true, template: "mail"//, blink: true
                }
    
                // open notification.
                $scope.checkMail = function () {
                    $scope.notifications.push({});
                    $scope.notificationSettings.apply('open');
                }
    
                $scope.showMails = function () {
                    $scope.showAllMails = true;
                }
            });
        </script>
    </head>
    <body>
        <div ng-controller="demoController">
            <jqx-notification jqx-on-click="showMails()" jqx-settings="notificationSettings">
                <div>
                    You have <b>{{notifications.length}}</b> new messages.
                </div>
                <div style="font-size: smaller; text-align: center;">
                    Click to view.
                </div>
            </jqx-notification>
            <jqx-button jqx-on-click="checkMail()">
                Check mail</jqx-button>
            <div id="messagePanel" ng-show="showAllMails" style="width: 400px;">
                <div ng-repeat="notification in notifications">
                    <p>
                        <b>From:</b> {{notification.name}}
                    </p>
                    <p>
                        <b>About</b>: {{notification.about}}
                    </p>
                    <p>
                        {{notification.message}}
                    </p>
                </div>
            </div>
        </div>
    </body>
    </html>
    

    should show 3 notifications, instead it shows 2 on the first click and instead of 4 on the second click it shows only 3.
    Shouldn’t it wait with the copy until the scope is applied?

    Best regards


    Dimitar
    Participant

    Hi Aram,

    Here is how to solve this issue:

    $scope.checkMail = function () {
        $scope.notifications.push({});
        setTimeout(function () {
            $scope.notificationSettings.apply('open');
        }, 0);
    }

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.