왜 빈 옵션을 설정되지 않에 대한 ng-옵션에서 지시어

Question

내가 만들려고 하는련 지시어를 관리하 promps 의 <select> 입력합니다.3 가지 모드는 다음과 같습니다:

1. 을 허용하지 않는 빈 옵션
   • 이것은 기본 행동
2. 용 빈 옵션 없이 텍스트
   • 에 의해 달성 설정 allow-blank="true" 에 지시어
3. 용 빈 옵션과 함께 프롬프트를 텍스트
   • 에 의해 달성 설정 allow-blank 어떤 값보 "true"

그러나, 빈 옵션이 있지 않습니다.

데모 Plunker

템플릿

<select ng-options="tag.id as tag.name for tag in myTags">
  <option ng-if="allowBlank === 'true'" value=""></option>
  <option ng-if="allowBlank && allowBlank !== 'true'" value="">{{allowBlank}}</option>
</select>

지시어

myApp.directive('mySelector', ['$http', function($http) {
  return {
    templateUrl:'my-selector-template.html',
    restrict: 'E',
    scope: {
      allowBlank: '@?'
    },
    replace: true,
    controller: function ($scope) {
      $scope.myTags = [
        {"name":"aliquam in","id":1},
        {"name":"massa velit","id":2},
        {"name":"nec vestibulum","id":3}
      ];
    }
  };
}]);

Answer 1

문제는 콘텐츠의 select 가 transcluded (아래 참조).당신이 검사하는 요소를 출력하지 않아도 참조 옵션 태그를 정의한다.

당신이 사용하는 문자열을 사용해야 합 pre-링크 기능을 추가 정확한 옵션을 통해서 자바 스크립트.다음 코드는 해야 할 트릭(갈래 쿵).

link: {
  pre: function(scope, element, attrs){
    if(attrs.allowBlank === 'true') element.append('<option value=""></option>');
    else if(attrs.allowBlank && attrs.allowBlank !== '') element.append('<option value="">' + attrs.allowBlank + '</option>');
  }
}

편집 선택하지 않'transclude'그것의 내용으로,@lightswitch05 지적 선택 directive 잡고 첫번째 자녀와 함께 value="" 으로 빈 노드(원 ref).나중에 다음을 지웁니다 밖으로 내용의 선택과 동적으로 추가 관련 <option> 태그(원 ref)