2017-09-25 11 views
0

ng-options을 사용하여 선택 드롭 다운을 나타내는 AngularJS 1.5 구성 요소가 있습니다. 이 ng 옵션은 구성 요소에 바인딩 된 name 속성의 값에 따라 상수 파일에서 다른 데이터로 동적으로 채워지며 부모 컨트롤러에서 제공됩니다. 예를 들어
, 내 구성 요소는 다음과 같습니다각도 1.5. component - bind 된 속성을 통해 상위 컨트롤러를 구별하는 가장 좋은 방법은 무엇입니까?

는 상위 제어기의 관점에서 그래서

angular 
    .module('test.component') 
    .component('Selector', { 
     controller: Selector, 
     controllerAs: 'vm', 
     templateUrl: 'selector.html', 
     bindings: { 
      model: '=', 
      form: '<', 
      name:'@', 
      label:'@', 
      constant: '<', 
     } 
    }); 
    function Selector(CONSTANTS, SOME_OTHER_CONSTANTS) { 
     var vm = this; 
     switch(vm.name) { 
      case 'Name1': 
      vm.constant = CONSTANTS; 
      break; 

      case 'Name2' : 
      vm.constant = SOME_OTHER_CONSTANTS; 
      break; 
     } 

    } 

을 test.component.js,이 같다 :
부모 -보기. 그것은 잘 작동하지만 어쩌면 그것은 좋은 생각이 아니다

<selector 
    name="Name1" 
    form="vm.myForm" 
    model="vm.myModel> 
</selector> 

HTML은 부모 C를 구별 ontroller 및 데이터는 name 속성을 통해 주로 양식 유효성 검사에 사용되므로 상위 컨트롤러를 구별하기 위해 사용하는 것이 더 좋으므로 다른 데이터를 해당 옵션에 따라 다른 옵션으로 채울 수 있습니까?

모든 도움과 제안을 주시면 감사하겠습니다.

답변

1

당신이이 상수의 단지 2가있는 경우 - 당신은 인젝터와 함께 갈 수있는 다른 20 같은 경우, 확인을 보이는 경우 사용 :

function Selector($injector) { 
     var vm = this; 
     vm.constant = $injector.get(constantProvider);  
    } 

<selector 
    constant-provider="SOME_OTHER_CONSTANTS" 
    form="vm.myForm" 
    model="vm.myModel> 
</selector> 

당신은 당신이 이름으로 상수를 해결하려는 여러 위치가있는 경우 , 당신은이 모든 작은 상수를 저장하기 위해 별도의 공장을 만들려고 할 수 있습니다 :

module.factory('MyConstants', function(CONSTANTS, SOME_OTHER_CONSTANTS) { 
    return { 
    name1: CONSTANTS, name2: SOME_OTHER_CONSTANTS 
    } 
}); 
+0

고마워요! 공장에 좋은 아이디어. btw, 나는 3 개 이상의 상수를 가지고 있기 때문에 스위치를 사용하고, 앞으로는 더 많이 가질 것으로 예상됩니다. – Julsy