각도 값이있는 요소 참조

Question

많은 필드 세트가있는 복잡한 양식이 있고 선택한 필드 세트를 변경시 상단으로 이동시킬 선택 요소가 필요합니다. 나는 각도에 익숙하지 않고이 각도에 대해 생각하는 데 어려움을 겪고 있습니다!

필자는 필드 세트를 가지고 있는데, 'switcher'지시문을 작성하고 초기화시 필드 세트의 전설로 채우고 선택한 요소의 제목을 로깅 할 콘솔을 만들지 만 실제 요소가 필요합니다. 그래서 그것을 DOM의 목록 맨 위로 옮길 수 있습니다. select 옵션의 값을 다른 html 요소와 연관시키는 방법은 무엇입니까? 아니면이 문제에 대한 더 나은 접근법이 있습니까?

내 양식 :

<form> 
    <switcher></switcher> 
    <div class="switchable" ng-include="app/controls/outline"></div> 
    <div class="switchable" ng-include="app/controls/labelling"></div> 
    <div class="switchable" ng-include="app/controls/formatting"></div> 
    <!--... etc...--> 
</form> 

예는 다음과 같습니다

<fieldset> 
    <legend>Outline</legend> 
    <!--some form elements--> 
</fieldset> 

스위처 HTML :

<select ng-change="changeSwitch()" ng-model="selectedMenu"></select> 

스위처 지침 :

angular.module('myApp') 
    .directive('switcher', function ($timeout) { 

    return { 
     templateUrl: 'app/directives/switcher/switcher.html', 
     restrict: 'EA', 
      replace: 'true', 
     link: function (scope, element, attrs) { 
     var setOptions = function() { 
      $('.switchable').each(function(i, ele){ 
      $(element).append('<option>'+$(ele).find('legend').text()+'</option>'); 
      }); 
     } 
     $timeout(setOptions, 0); 

     scope.changeSwitch = function() { 
      console.log(scope.selectedMenu); 
     } 
     } 
    }; 
    }); 

변경시 콘솔에 범례를 인쇄하지만 해당 div를 맨 위로 이동합니다.

Answer 1

fieldset 요소를 제어하려면 switcher 요소의 하위 항목으로 만듭니다.

`<switcher> 
    <fieldset switcher-option="Outline"> 
     <legend>Outline</legend> 
     <!--some form elements--> 
    </fieldset> 
</switcher>` 

다음으로 요구하고 컨트롤러의 사용 지침을 스위처 자체를 기록합니다 모든 FIELDSET에 사용자 지정 지시문을 추가합니다. 지시문은 변경 내용의 출처를 이해하기가 어려워지기 때문에 소유하지 않은 요소와 관련해서는 안됩니다. 여기에 plnkr에 대한 링크가 있습니다. 여기에서 코드를 약간 수정하고 새로운 것에 대해 말했기 때문에 변경 사항을 이해하는 데 도움이되는 많은 의견을 추가했습니다.