在AngularJS中使用JqueryUI菜单

Question

我们正在尝试让JqueryUI菜单在我们的AngularJS应用中工作。 在Layout.js中，我们正在执行以下操作：

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"
                    });

                }
               .......

但这似乎不起作用。 我读到将menu（）调用移动到限制为“ A”的角度“ .directive”应该可以解决问题。 这是使JqueryUI组件与AngularJS一起使用的唯一推荐方法吗？

谢谢

Answer 1

这种代码需要放在指令中。 您不应在控制器中使用jQuery。

另外，当您尝试在$apply()之外初始化插件时，无需考虑任何渲染时间。 现在，当您运行插件代码时， $("#mdsubscriptionMenu")可能仍为空。

这将有助于查看用于呈现菜单的html视图。

您可以使用ng-repeat的$last属性来触发菜单插件init