لماذا الخيارات فارغة لا يتم تعيين ng-الخيارات ضمن توجيهات

Question

أحاول خلق AngularJS التوجيه لإدارة 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 (انظر أدناه).إذا كنت تفقد عناصر الانتاج حتى أنك لا ترى خيار العلامات المحددة في الداخل.

كما كنت فقط باستخدام سلسلة يجب أن تستخدم قبل ربط وظيفة حيث يمكنك إضافة الخيار الصحيح في طريق جافا سكريبت.التعليمة البرمجية التالية ينبغي أن تفعل خدعة (متشعب غطس).

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 أشار إلى اختيار التوجيه يمسك الطفل الأول مع value="" كما الفارغة عقدة (المصدر المرجع).ثم في وقت لاحق أنه مسح محتويات تحديد و حيوي يضيف ذات الصلة <option> الكلمات الدليلية (المصدر المرجع)