Using JqueryUI menu with AngularJS

Question

We're trying to get JqueryUI menus to work in our AngularJS app. From our Layout.js we're doing the following:

OURApp.controller('leftBarCtrl', ['$scope', function ($scope) {
    $scope.init = function () {
        $.ajax({
            url: "../Data/MainPageData",
            type: "GET",
            dataType: "Json",
            data: {},
            success: function (data) {
                if (data.Acknowledgment) {
                    $scope.$apply(function () {
                        $scope.subscriptionsModel = data.userSubscriptionsReponse.UserSubscriptionsObjects;
                        $scope.CompanyModel = data.userResponse.CompanyInformation;
                    })
                    $("#mdsubscriptionMenu").menu({
                        menus: "ul",
                        items: "li"
                    });

                }
               .......

But it doesn't seem to work. I read that moving the menu() call to an angular ".directive" restricted to 'A' should do the trick. Is that the only recommended way of getting JqueryUI components to work with AngularJS?

Thanks

don't mixup jquery with angular, use $http instead of $.ajax will remove your worry to run digest cycle — Pankaj Parkar
– Pankaj Parkar, Commented Jul 17, 2015 at 19:06

charlietfl · Accepted Answer · 2015-07-17 20:08:51Z

1

This sort of code needs to be in a directive. You shouldn't have jQuery in a controller.

Also you aren't accounting for any rendering time when you try to initialize the plugin outside of $apply(). When you are running the plugin code now $("#mdsubscriptionMenu") is likely still empty.

It would help to see the view html you are using to render the menu.

You can use the $last property of ng-repeat to trigger the menu plugin init

edited Jul 17, 2015 at 20:08

answered Jul 17, 2015 at 19:15

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Voidsbane Over a year ago

Yep, using the directive and the $last property did the trick! Thanks!

Collectives™ on Stack Overflow

Using JqueryUI menu with AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related