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

내가 각도의 약간의 자신을 newb 해요,하지만 헤이,의 함께 배울 수 있습니다.

AngularUI's Sortable Directive을 잘 보아라. 이것은 문자 그대로 jQueryUI sortable 플러그인을위한 AngularJS 래퍼이다.

동일한 주제를 다루는 this tutorial-like article도 있습니다 (jQueryUI의 정렬 가능 플러그인 (각이있는 정렬 가능한 플러그인 및 작업에 대한 바인딩 사용).

기본적으로 지시문의 연결 함수에서 scope.$watch을 사용하여 모델 변경 사항을 확인하고 scope.$apply을 사용하여 요소가 플러그인을 통해 정렬 될 때 모델을 업데이트합니다.