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: []
                                }
...

    ];
}

そして、jQueryUIを使用してそれらを再配置しています。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>

これはjQueryUIパススルーです。

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 のソート可能なプラグインを使用し、バインディングを機能させる)。

基本的に、ディレクティブのリンク関数では、モデルの変更を監視し、要素がプラグインを介してソートされたときにモデルを更新するためにscope.$watch使用します。scope.$apply

于 2013-02-17T19:41:57.733 に答える