web-dev-qa-db-de.com

Vorlage für Direktive muss genau ein Wurzelelement haben

Ich bin neu bei angleJs. Ich versuche, eine neue Direktive zu erstellen, die ein Eingabeelement und eine Schaltfläche enthält. Ich möchte diese Anweisung verwenden, um den eingegebenen Text zu löschen, wenn auf die Schaltfläche geklickt wird.

Wenn ich meine Direktive in HTML verwende, bekomme ich folgende Fehlermeldung:

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

html:

<div class="input-group">
         <cw-clearable-input ng-model="attributeName"></cw-clearable-input>
 </div>

clearable_input.js:

angular.module('cw-ui').directive('cwClearableInput', function() {
  return {
    restrict: 'EAC',
    require: 'ngModel',
    transclude: true,
    replace: true,
    template: '<input type="text" class="form-control"/><span class="input-group-btn"><button type="button" class="btn" ng-click="" title="Edit"><span class="glyphicon-pencil"></span></button></span>',
    controller: function( $scope ) {

    }
};
});

Ich kann nicht herausfinden, wie ich das erreichen kann. 

javascriptangularjsangularjs-directive
18
Vish021

Nun, der Fehler ist ziemlich selbsterklärend. Ihre Vorlage muss eine einzige Wurzel haben und Ihre hat zwei. Der einfachste Weg, dies zu lösen, wäre, das Ganze einfach in eine div oder eine span zu packen:

template: '<div><input type="text" class="form-control"/><span class="input-group-btn"><button type="button" class="btn" ng-click="" title="Edit"><span class="glyphicon-pencil"></span></button></span></div>',

Vor:

<input type="text" class="form-control"/>
<span class="input-group-btn">
  <button type="button" class="btn" ng-click="" title="Edit">
    <span class="glyphicon-pencil"></span>
  </button>
</span>

Nach dem:

<div>    <!--  <- one root   -->
  <input type="text" class="form-control"/>
  <span class="input-group-btn">
    <button type="button" class="btn" ng-click="" title="Edit">
      <span class="glyphicon-pencil"></span>
    </button>
  </span>
</div>
26
JLRishe

Dieser Fehler tritt auch auf, wenn der Pfad zur Vorlage falsch ist. In diesem Fall ist der Fehler alles andere als erklärend. 

Ich habe die Vorlage aus templates/my-parent-template.html mit der (falschen) referenziert. 

template-url = "Unterordner/my-child-template.html"

Ich habe das geändert 

template-url = " templates / Unterordner/my-child-template.html"

was es gelöst hat.

17
Frederik Struck-Schøning

Wickeln Sie einfach Ihre Vorlage in etwas:

template: '<div><input type="text" class="form-control"/><span class="input-group-btn"><button type="button" class="btn" ng-click="" title="Edit"><span class="glyphicon-pencil"></span></button></span></div>',
5
Kostya Shkryob

Wenn Sie kein Stammelement erstellen möchten, können Sie stattdessen Ersetzen auf false setzen. In Ihrer Direktive setzen Sie es auf true, wodurch das Direktive-Tag "cw-clearable-input" durch das Wurzelelement Ihrer Direktive ersetzt wird.

4
jgerstle

Wenn sich in Ihrer Vorlage ein Kommentar neben dem Stammelement in der Direktivenvorlage befindet, wird derselbe Fehler angezeigt.

Z.B. Wenn Ihre Direktivenvorlage über solche HTML-Werte verfügt (mit "replace" in der Direktive JS auf true gesetzt), wird derselbe Fehler angezeigt

<!-- Some Comment -->
<div>
   <p>Hello</p>
</div>

Um dies in Szenarien zu beheben, in denen Sie die Kommentare beibehalten möchten, müssen Sie den Kommentar verschieben, sodass er sich innerhalb des Vorlagenstammelements befindet.

<div>
   <!-- Some Comment -->
   <p>Hello</p>
</div>
1
ami91

Wenn das alles für mich nicht funktionierte, fügte dem Vorlagenpfad einen / hinzu das Problem in meinem Fall behoben.

function bsLoginModal() {
        return {
            restrict: 'A',
            templateUrl:'/app/directives/bootstrap-login-modal/template.html',
            link: linkFunction,
            controller: SignInCtrl,
            controllerAs: 'vm'
        }
    }

anstatt 

templateUrl:'app/directives/bootstrap-login-modal/template.html

Viel Glück.

0
Akash

Überprüfen Sie Ihre template oder templateUrl 

templateUrl: 'some/url/here.html'

template: '<div>HTML directly goes here</div>'
0
KimchiMan

Mein Problem war, dass das HtmlWebpackPlugin des Webpacks ein Skript-Tag an den Inhalt der Direktive anhängte. Also angular sah:

<div>stuff</div>
<script type="text/javascript" src="directives/my-directive"></script>

Die Lösung besteht darin, die inject -Option von HtmlWebpackPlugin in Ihrem webpack.config.js zu verwenden:

new HtmlWebpackPlugin({
  template: './src/my-directive.html',
  filename: './src/my-directive.html',
  inject: false
}),
0
Greg