ng-transclude kullanma, tablodaki gibi iyi görünmüyor.

Question

Tablo verisi olmadığında (örn. "Sonuç bulunamadı"), bazı metni <td> numaralı belgede görüntülemek için kullanılan basit bir yönerge oluşturdum. masanın sırası. <td>'da sadece statik bir metin almadan önce, ancak şimdi herhangi bir DOM'yi içine yerleştirebilmek istiyorum. Yönergeye ng-transclude eklemeyi denedim, ancak şimdi öğeyi garip bir şekilde oluşturuyor.

app.directive('skNoResult', ['$rootScope', function() { 
    return { 
     restrict: 'A', 
     replace: true, 
     transclude: true, 
     template: '<tr ng-if="!hasResult"><td class="left" colspan="{{ colSpan }}"><ng-transclude></ng-transclude></td></tr>', 
     link: function (scope, elem, attrs, ctrl) { 
      var span = angular.element(elem).parents('tbody').siblings('thead').find('tr').children().length; 

      scope.colSpan = span; 

      scope.$watch(attrs.skNoResult, function (list) { 
       if (list.length) { 
        scope.hasResult = true; 
       } else { 
        scope.hasResult = false; 
       } 
      }); 
     } 
    }; 
}]); 

Temelde sadece veri seti (dizi) izler ve herhangi bir veri ya da değil orada olup olmadığını görmek için uzunluğunu kontrol eder:

İşte benim yönergesi olduğunu. Varsa, bu satırı ngIf ile görüntülüyoruz.

Benim html sadece sorun çapraz dahil metin sadece textNode olarak DOM içine yerleştirilir ediliyor ve oldukça bunun içinde daha <table> yukarıda gösterildiğini olmasıdır bu

<tr sk-no-result="model.dataSet">Here is my text I want to transclude into my directive</tr> 

benziyor. Bunun neden olduğu hakkında bir fikrin var mı?

Answer 1

ben bunu görüyor musunuz neden değildir çünkü Açısal taşımaktadır ama inan daha çok <td> bekliyor ve sonuç olarak o Açısal ÖNCE tablosunun üzerindeki bu içeriği hareket ederken bir <tr> içindeki geçersiz html olduğunu görünce tarayıcı bile Transkripsiyonu yürütmek ve yapmak için bir şans olur. Herhangi bir Açısal kodu kaldırarak kolayca test edebilirsiniz ve sadece HTML'yi bırakın ve sonucun tamamen aynı olduğunu fark edersiniz. ngTransclude unsuru kullanımı, yani <ng-transclude></ng-transclude> Açısal sürümden sadece mevcut olduğunu

app.directive('skNoResult', ['$rootScope', function() { 
    return { 
    restrict: 'A', 
    replace: true, 
    transclude: true, 
    template: '<td class="left" colspan="{{ colSpan }}"><div ng-transclude></div></td>', 
    link: function (scope, elem, attrs) { 
     var span = angular.element(elem).parents('tbody').siblings('thead').find('tr').children().length; 
     scope.colSpan = span; 
    } 
    }; 
}]) 

Not:

<tr ng-if="!model.dataSet.length"> 
    <td sk-no-result="model.dataSet">Here is my text I want to transclude into my directive</td> 
</tr> 

Ve yönergesi: Burada

Kullanmak mümkün olabilir bir çözüm olduğunu 1.3.0-beta.16 ve üstü. Eğer bir 1.2 sürümü kullanıyorsanız, yukarıdaki kullanım örneğinde olduğu gibi özellik kullanımını kullanmanız gerekir. <div ng-transclude></div>

İşte bir çalışma demo.