Angularjs 将HTML更改绑定到模型

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

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

链接

对象在更改时更新

这是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可排序插件的AngularJS包装

我还发现它涵盖了相同的主题（使用jQueryUI的带angular的可排序插件，并开始绑定）

---

基本上，在指令的链接功能中，您可以使用

scope.$watch

监视模型的更改，并使用

scope.$apply

在元素通过插件排序时更新模型。

Thanx获取资源！看来最好的解决方案是阅读它们的实现并从那里继续下去

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