동일한 지시어를 공유하는 두 개의 드롭 다운 동시 실행

Question

입력란에 입력을 시작할 때 관련 항목을 열고 표시하는 X라는 anglejs 드롭 다운 지시문이 있습니다. 동일한 컨트롤러와 템플릿 (즉, 동일한 지시문이지만 격리 된 범위가 다른)이있는 내 페이지에는 두 개의 X 지시문이 있습니다.

첫 번째 지시문은 행성 목록을 표시하고 두 번째 지시문은 입력 된 행성의 미네랄 목록을 표시합니다. 입력에 대한 타이핑을 시작할 때 관련 데이터를 동적으로 표시하는 두 가지 지시문을 모두 열고 싶습니다. 하지만 그들은 같은 템플릿을 공유하기 때문에 두 번째 지시어에 대한 드롭 다운을 여는 방법을 모른다.

템플릿에는 ng-repeat가 하나 있지만 2 개의 다른 범위에 2 개의 목록이 있습니다. 나는 이것을 이해하는 접근법을 알고 싶다. 고맙습니다.

Answer 1

이 지시문은 inpVal을 수신하고 지시문에서 목록을 업데이트합니다 (지시문에 inpVal을 전달해야 함).

.directive("myCustomSelect", function(){ 
    return { 
     restrict: "AE", 
     scope: { 
      inpVal: "=" 
     }, 
     link: function(scope, ele, attrs){ 

      var _list = []; 

      scope.list = _list; 

      var _watch = scope.$watch("inpVal", function(n){ 
       if(n){ 
        updateList(); 
       } 
      }); 

      scope.$on("$destroy", function(){ 
       _watch(); 
      }); 

      function updateList(){ 
       var enteredVal = scope.inpVal; 

       //_.filter is underscore js 
       scope.list = _.filter(_list, function(v){ 
        return enteredVal == v.name?true:false; 
       });     
      }    

     }, 
     template: "<select ng-options="l.name as l for l in list"></select>" 
    } 
})