將HTML更改綁定到模型

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的直通：

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來更新模型。