Soru AngularJS: 'th' etiketini direktif şablonunda kullanırken 'Yönergenin şablonu tam olarak bir kök öğeye sahip olmalıdır'


Özel uygulamaya çalışıyorum sortBy html tablosunda sütunları sıralamak için yönerge.

HTML:

<thead>
   <tr>
    <sort-by-directive
      ng-repeat="header in headers"
      onsort="onSort"
      sortdir="filterCriteria.sortDir"
      sortedby="filterCriteria.sortedBy"
      sortvalue="{{ header.value }}">{{ header.title }}
    </sort-by-directive>
  </tr>
</thead>

JS:

angular.module('mainApp.directives').directive('sortByDirective', function () {

        return {
            templateUrl: 'SortHeaderTemplate',
            restrict: 'E',
            transclude: true,
            replace: true,
            scope: {
                sortdir: '=',
                sortedby: '=',
                sortvalue: '@',
                onsort: '='
            },
            link: function (scope, element, attrs) {
                scope.sort = function () {
                    if (scope.sortedby == scope.sortvalue)
                        scope.sortdir = scope.sortdir == 'asc' ? 'desc' : 'asc';
                    else {
                        scope.sortedby = scope.sortvalue;
                        scope.sortdir = 'asc';
                    }
                    scope.onsort(scope.sortedby, scope.sortdir);
                }
            }
        };
    });

Direktif Şablonu:

<script id="SortHeaderTemplate" type="text/ng-template">
<th ng-click="sort(sortvalue)">
  <span ng-transclude=""></span>
  <span ng-show="sortedby == sortvalue">
    <i ng-class="{true: 'sorting_asc', false: 'sorting_desc'}[sortdir == 'asc']"></i>
  </span>
  <span ng-show="sortedby != sortvalue">
    <i ng-class="{true: 'sorting', false: 'sorting'}[sortdir == 'asc']"></i>
  </span>
</th>
</script>

Ben kullandım th yönerge şablonunun kök etiketi olarak bir hata alıyorum:

Error: [$compile:tplrt] Template for directive 'sortByDirective' must have exactly one root element. SortHeaderTemplate

ama değiştiğimde th için a veya span Etiketler her şey iyi çalışıyor.

Neyi yanlış yapıyorum?


28
2018-03-13 09:02


Menşei




Cevaplar:


Bunu bekliyorum <th> bir ara bağlamda değerlendirildiğinde bir ara noktaya eritilir. <tr> (Bu şablonu web sayfanızın rastgele bir bölümüne yerleştirmek için <th> kaybolmak).

Senin pozisyonunda bir <div> şablonda değişiklik sort-by-directive bir 'A' tipi yönergeye ve <th sort-by-directive>...</th> eskisi gibi, olmadan  replace: true.


18
2018-03-13 09:30



replace: false benim için uyandım - LAXIT KUMAR
Değiştirme ile çalışabilir miyiz: true ve E tipini kısıtla - Heemanshu Bhalla


Direktif ve tablo öğeleriyle böyle garipliklerle karşılaştım. Bunu gör konu Örneğin. Şablonunuzu silmeyi deneyin. div etiket veya kullanım replace:false.


31
2018-03-13 09:26



Diddo - replace: true benim için önemsizdi. - Cody
+1 değiştiriliyor replace: true için replace: false benim için çalıştı ve ben bile yoktu th  tr  td benim elemanlarım html - fidev
Bunun gibi bir bağlantı ile bir menü olarak benim için çalıştı: <li><a href ng-click="redirectTodiv('mentionList', $event)"><img title="Mentions List" src="images/postList.svg" title="" height="25" /><span class="navText">Mentions List</span></a></li> - onmyway


Bu sizin durumunuz değil, aynı sorunla karşılaştım çünkü kodumun şablon biçimlendirmesinden önce ve sonra html yorumları vardı.

<!-- Foo Widget -->
<div class="foo-widget">[...]</div>
<!-- end:: Foo Widget -->

Yorumlardan ve voillardan kurtuldum - problem çözüldü.


22
2017-09-24 17:26



Evet, bu benim de sorunumdu. Teşekkürler! - Stone
Bu şimdiye kadar karşılaştığım en çılgın Açısal konulardan biri. Bunun için büyük teşekkürler! - Nine Magics


Bu hata, direktifin şablonundaki tüm etiketleriniz için bir sarma elemanına sahip olmanız gerektiğinden kaynaklanabilir. Yönergenizin şablonu yalnızca olamaz:

<nav></nav>
<div></div>

Olmalı:

<div>
 <nav></nav>
 <div></div>
</div>

9
2017-11-21 00:46



Şablonumdaki sarmalayıcı öğeyi eklemek bunu benim için düzeltti. Bahşiş için teşekkürler; 0 - Andy Allison


Ben kullandığımda bu hatayı aldım template kullanmam gerektiğinde yönerge tanımının özelliği templateUrl eğer bu herkese yardımcı olursa.


6
2017-07-28 20:08





Başkaları tarafından belirtildiği gibi: bunun nedeni, tarayıcınız masaya yerleştirilmeden önce TH'yi yok sayar. Bunu düzeltmek için tercih ettiğim yol, direktifin bir özellik yönergesine dönüştürülmesi ve tablodaki TH'ye eklenmesidir.

Direktif şöyle görünüyor:

.directive('sortByDirective', function () {

    return {
        templateUrl: 'SortHeaderTemplate',
        restrict: 'A',
        transclude: true,
        replace: false,
        scope: {
            sortdir: '=',
            sortedby: '=',
            sortvalue: '@',
            onsort: '='
        },
        link: function (scope, element, attrs) {
            scope.sort = function () {
                if (scope.sortedby == scope.sortvalue)
                    scope.sortdir = scope.sortdir == 'asc' ? 'desc' : 'asc';
                else {
                    scope.sortedby = scope.sortvalue;
                    scope.sortdir = 'asc';
                }
                scope.onsort(scope.sortedby, scope.sortdir);
            }
        }
    };
});

Sayfanızda ayarlamak şu şekilde görünür:

<th sort-by-directive
  ng-repeat="header in headers"
  onsort="onSort"
  sortdir="filterCriteria.sortDir"
  sortedby="filterCriteria.sortedBy"
  sortvalue="{{ header.value }}">{{ header.title }}
</th>

2
2018-03-13 09:37





Bunun eski olduğunu biliyorum ama başka bir çözüm var. Bu sorunla da karşılaştım ve yukarıdaki tüm çözümleri şanssız olarak denedim.

Bazı garip nedenlerden dolayı, bu hatanın 'templateUrl' içinde bir yazım hatası olması durumunda ortaya çıkması - açısal yolun html dosyasını verilen yolla bulamıyorsa - aynı şeyi elde etmeniz 'tam olarak bir kökü olmalı öğe hatası.

Yani - templateUrl'i düzeltmek hatayı benim için düzeltti.

Umarım bu, gelecekte kimseye yardım eder.


2
2017-07-16 09:19





Aşağıdaki hatayla karşılaşıyorum:

Error: [$compile:tplrt] http://errors.angularjs.org/1.2.6/$compile/tplrt?p0=stockWidget&p1=stock.html.

Şablon dosyasının en üst kısmındaki işleri kaldırarak dolaşıyorum.

değiştirmek angularjs 1,3 ileri ile kaldırılmış, bir sonraki sürüm tamamen kaldıracak, yerine anahtarı kullanmamak daha iyidir.


1
2017-12-02 09:44



Teşekkürler; Bu benim problemimi çözdü! - Jill Renee


Sorunla birkaç kez karşılaştım ve çoğu zaman öğelerinizi tek bir öğe altında sarmalamamanız gibi olabilir.

<div>
  <div... </div>
</div>

Ancak şablon yolu doğru olmadığında bu hatayı aldığınız bir durum vardı. Dolayısıyla, şablona doğru bir şekilde atıfta bulunup bulunmadığını kontrol edin.


1
2018-03-11 20:56





Hangi açısal versiyonu kullanıyorsunuz?

Sorunu giderilmiş olan bir şeye benzeyen bir hata oluştu. 1.2.13 1.3 Beta 1 bağlanma bağlantısı

https://github.com/angular/angular.js/issues/1459


0
2018-03-13 09:29