0

我有一个包含导航菜单结构的数据结构。

function linksRarrange($scope, linksData) {
    $scope.links = [
        {
            text: 'Menu Item 1',
            url: '#',
            submenu: []
        }, {
            text: 'Menu Item 2',
            url: '#',
            submenu: [
                {
                    text: 'Sub-menu Item 3',
                    url: '#',
                    submenu: []
                }, {
                    text: 'Sub-menu Item 4',
                    url: '#',
                    submenu: [
                        {
                            text: 'Sub-sub-menu Item 5',
                            url: '#',
                            submenu: [
                                {
                                    text: 'Sub-sub-menu Item 6',
                                    url: '#',
                                    submenu: []
                                }
...

    ];
}

我正在使用 jQuery UI 重新排列它们。问题是我不确定在这种情况下如何使用 2 路绑定，以便links在更改时更新对象。

这是 HTML：

<div class="nav-manage clearfix" ng-app="linksManager">

    <div
        class="links-arrange"
        ng-controller="linksRarrange"
        ng-init="submenu = links;"
    >
        <ul
            class="ng-list-level"
            model-subset="submenu"
            ui-jq="sortable"
            ng-include="'inner-list.html'"
        ></ul>
    </div>

    <script type="text/ng-template" id="inner-list.html">

        <li ui-jq="droppable" ng-repeat="link in submenu">
            <a href="{{link.url}}">{{link.text}}</a>
            <ul
                class="ng-list-level"
                ng-class="{'empty hidden': !link.submenu.length}"
                ui-jq="sortable"
                ng-init="submenu = link.submenu;"
                ng-include="'inner-list.html'"
            ></ul>
        </li>

    </script>

这是 jQuery UI 直通：

linksManager.value('ui.config', {
    jq: {
        sortable: {
            connectWith: '.ng-list-level',
            dropOnEmpty: true,
            placeholder: 'sortable-nav-items-placeholder'
        },
        droppable: {
            tolerance: 'touch',
            over: function () {
                $(this).children('ul.hidden').removeClass('hidden');
            },
            out: function () {
                $(this).children('ul.empty').addClass('hidden');
            },
            drop: function () {
                $(this).children('ul.empty').removeClass('empty');
            }
        }
    }
});
4

1 回答 1

0

我自己有点 Angular 新手，但是嘿，让我们一起学习吧。

好好看看AngularUI 的 Sortable Directive，它实际上只是 jQueryUI 可排序插件的 AngularJS 包装器。

我还发现这篇类似教程的文章涵盖了相同的主题（使用 jQueryUI 的带角度的可排序插件，并让绑定工作）。

Basically, in your directive's linking function, you use scope.$watch to keep an eye on changes to your model, and you use scope.$apply to update your model when the elements are sorted via the plugin.

于 2013-02-17T19:41:57.733 回答