Angular Richtlinie funktioniert nicht auf dem Tisch

Question

ich die folgende Tabelle haben:

<table> 
    <thead> 
    <tr> 
     <th>Uno</th> 
     <th>Dos</th> 
    </tr> 
    </thead> 

    <!--directive template should be here--> 
    <double-rows></double-rows> 
    <!--/directive template should be here--> 

</table> 

Die Richtlinie wird definiert als:

angular.module('app', []); 

angular.module('app').directive('doubleRows', function() { 
    return { 
    templateUrl: 'template.html', 
    restrict: 'E', 
    scope: { 
     row: '=' 
    } 
    } 
}); 

So einfach wie es aussieht, ist es machen nicht richtig. z:

<double-rows class="ng-isolate-scope"> 

Cell1 
Cell2 

</double-rows> 

<table> 
    <thead> 
    <tr> 
     <th>Uno</th> 
     <th>Dos</th> 
    </tr> 
    </thead> 

    <!--directive template should be here--> 

    <!--/directive template should be here--> 

</table> 

Sie können den vollständigen Code in hier sehen: https://plnkr.co/edit/0Z65aK?p=preview

Wie es funktioniert?

Answer 1

Dies ist nicht gerade ein kantiges Problem, sondern mehr, wie der Browser entscheidet, den von Ihnen geschriebenen HTML zu interpretieren. Bestimmte Tags dürfen nicht in anderen Tags verschachtelt werden, dies ist besonders häufig in Listen (ul, li) und Tabellen (gilt auch für verschachtelte Links und einige andere Dinge).

Anstatt E zu verwenden, wenn Sie Einschränkung A verwenden und einen Elementtyp verwenden, der in der Tabelle zulässig ist, funktioniert es (ich habe auch replace: true in Ihrer Anweisung verwendet, damit das ursprüngliche Element ersetzt wird) ein Kind davon)

https://plnkr.co/edit/fgRzZU?p=preview

angular.module('app').directive('doubleRows', function() { 
    return { 
    templateUrl: 'template.html', 
    restrict: 'A', 
    replace:true, 
    scope: { 
     row: '=' 
    }, 
    controller: function() { 
     console.log('hi'); 
    } 
    } 
}); 

Die HTML

<table> 
    <thead> 
    <tr> 
     <th>Uno</th> 
     <th>Dos</th> 
    </tr> 
    </thead> 

    <!--directive template should be here--> 
    <tbody double-rows> 
    </tbody> 
    <!--/directive template should be here--> 

</table>