Question

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

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来重新排列它们。问题是我不确定在这种情况下如何使用双向绑定，以便在更改时更新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 passthrough：

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

Answer 1

我自己有点像角色，但是嘿，让我们一起学习。

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

我还发现this tutorial-like article涵盖了相同的主题（使用jQueryUI的带有角度的可排序插件，并使绑定工作）。

基本上，在你的指令的链接函数中，你使用scope.$watch来关注模型的变化，并且当元素通过插件排序时，你使用scope.$apply来更新你的模型。 / p>

将HTML更改绑定到模型

1 个答案: