Angularjs 지시어 변경 ng-model

Question

<select>을 모방하는 지시문을 만들었지 만 더 스타일링 할 수는 있지만 ng-model을 사용하여 구현하는 방법에 대한 정보는 찾을 수 없었습니다. 여기에 지침입니다 : 나는 <li>에 클릭 이벤트에서 NG 모델을 설정하는 방법

.directive('customSelect', [function() { 
     return { 
      restrict:'EA', 
      require: "ngModel", 
      scope:{ 
       choices:"=", 
       selected:"=" 
      }, 
      template:'\ 
       <div class="custom-select">\ 
        <div class="label">{{ selected }}</div>\ 
        <ul>\ 
         <li data-ng-repeat="choice in choices" data-ng-click="ngModel = choice">{{ choice }}</li>\ 
        </ul>\ 
       </div>', 
      replace:true 
     } 
}]) 

?

Answer 1

는 ngModel.$setViewValue을 시도해보십시오

이

app.directive('customSelect', [function() { 
     return { 
      restrict:'EA', 
      require: "?ngModel", 
      scope:{ 
       choices:"=", 
       selected:"@" 
      }, 
      link:function(scope,element, attrs,ngModel){ 
       scope.select = function (choice){ 
       ngModel.$setViewValue(choice); 
       } 
      }, 
      templateUrl:"template.html", 
      replace:true 
     } 
}]) 

템플릿 :

<div class="custom-select"> 
    <div class="label">{{ selected }}</div> 
    <ul> 
    <li data-ng-repeat="choice in choices" data-ng-click="select(choice)">{{ choice }}</li> 
    </ul> 
</div> 

DEMO