jQWidgets Forums

March 3, 2016 at 7:31 am jqxmenu with Angular and ui.router – issue with clickhandler #82055
Participant
Hi Peter,
Doesn’t work even after binding to events.
Here is my updated code, Please help.
Thanks,
Keshavan
<!DOCTYPE html>
<html ng-app="demoApp" lang="en">
<head>
    <title id='Description'>The demo demonstrates the Minimized state of jqxMenu.</title>
    <link rel="stylesheet" type="text/css" href="/angularjs/jQWidgets/jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="/angularjs/jQWidgets/scripts/jquery-1.11.1.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/scripts/demos.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/globalization/globalize.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
</head>
<body ng-controller="MainCtrl">
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["ui.router", "jqwidgets"]);
        demoApp.config(function ($stateProvider, $urlRouterProvider) {
            // For any unmatched url, send to /route1
            $urlRouterProvider.otherwise("Quotations")
            $stateProvider
                .state('Quotations', {
                    templateUrl: "/body.html",
                    controller: 'demoController',
                    controllerAs: 'test'
                })
                .state('Messages', {
                    templateUrl: "/body2.html",
                    controller: 'demoController',
                    controllerAs: 'test'
                })
        })
        demoApp.controller('MainCtrl', function ($state) {
            $state.transitionTo('Quotations');
        })
        demoApp.controller('demoController', function ($state, $scope) {
            var test = this;
            test.Url = "/";
            test.templateUrl = "/body.html";
            $scope.checked = true;
            var menu = {};
            $scope.menuSettings = {
                width: '100%',
                height: '32px',
                created: function (args) {
                    menu = args.instance;
                    menu.minimize();
                }
            };
            $scope.changeState = function () {
                if ($scope.checked) {
                    menu.minimize();
                } else {
                    menu.restore();
                }
            }
            $scope.clickHandler = function (event) {
                var args = event.args;
                $scope.log = "Clicked: " + $(args).text();
            };
            $scope.log = "";

        });
    </script>
    <jqx-menu  jqx-on-itemclick="clickHandler($event)"  jqx-settings="menuSettings">
        <ul>
            <li><a sref="Quotations">Quotations</a></li>
            <li><a sref="Messages">Messages</a></li>
            <li><a sref="Logout">Logout</a></li>
        </ul>
    </jqx-menu>
    <jqx-check-box ng-model="checked " ng-change="changeState($event) ">Minimized</jqx-check-box>
    <br/>
    <div style='margin-left: 20px; float: left;'>
        {{log}}
    </div>
    <div ui-view></div>

</body>
</html>