使用带有 AngularJS 的 JqueryUI 菜单答案

【问题标题】：Using JqueryUI menu with AngularJS使用带有 AngularJS 的 JqueryUI 菜单
【发布时间】：2015-07-17 19:03:06
【问题描述】：

我们正在尝试让 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 一起工作的唯一推荐方法吗？

谢谢

【问题讨论】：

不要将 jquery 与 angular 混淆，使用 $http 而不是 $.ajax 将消除您运行 digest 循环的烦恼

标签： javascript jquery angularjs jquery-ui

【解决方案1】：

这类代码需要在指令中。你不应该在控制器中使用 jQuery。

此外，当您尝试在 $apply() 之外初始化插件时，您没有考虑任何渲染时间。当您现在运行插件代码时，$("#mdsubscriptionMenu") 可能仍然是空的。

查看用于呈现菜单的视图 html 会有所帮助。

可以使用ng-repeat的$last属性来触发菜单插件初始化

【讨论】：

是的，使用指令和 $last 属性就可以了！谢谢！