webentwicklung-frage-antwort-db.com.de

Können Sie bestimmte Vorlagen in Angular UI Bootstrap überschreiben?

Ich bin neugierig, ob es eine Möglichkeit gibt, einzelne, spezifische Vorlagen aus der Datei ui-bootstrap-tpls zu überschreiben. Die überwiegende Mehrheit der Standardvorlagen entspricht meinen Anforderungen, aber es gibt ein paar spezifische Vorlagen, die ich ersetzen möchte, ohne den gesamten Prozess des Erfassens aller Standardvorlagen und ihrer Verkabelung mit der Nicht-TPLS-Version durchlaufen zu müssen.

87
Jeremy Privett

Ja, Anweisungen von http://angular-ui.github.io/bootstrap sind in hohem Maße anpassbar und es ist einfach, eine der Vorlagen zu überschreiben (und für andere Anweisungen immer noch die Standardanweisungen zu verwenden).

Es ist genug zu füttern $templateCache, entweder direkt füttern (wie im ui-bootstrap-tpls file) oder - wahrscheinlich einfacher - überschreiben Sie eine Vorlage mit dem <script> Direktive ( doc ).

Im Folgenden sehen Sie ein Beispiel, in dem ich die Vorlage des Alerts ändere, um x gegen Close zu tauschen:

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

    <script id="template/alert/alert.html" type="text/ng-template">
      <div class='alert' ng-class='type && "alert-" + type'>
          <button ng-show='closeable' type='button' class='close' ng-click='close()'>Close</button>
          <div ng-transclude></div>
      </div>
    </script>
  </head>

  <body>
    <div ng-controller="AlertDemoCtrl">
      <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">                     
        {{alert.msg}}
      </alert>
      <button class='btn' ng-click="addAlert()">Add Alert</button>
    </div>
  </body>
</html>

Live-Plunker: http://plnkr.co/edit/gyjVMBxa3fToYTFJtnij?p=preview

121

Verwenden von $provide.decorator

Die Verwendung von $provide zur Dekoration der Direktive vermeidet die Notwendigkeit, direkt mit $templateCache Herumzuspielen.

Erstellen Sie stattdessen wie gewohnt Ihre externe HTML-Vorlage mit einem beliebigen Namen, und überschreiben Sie dann das templateUrl der Direktive, um darauf zu verweisen.

angular.module('plunker', ['ui.bootstrap'])
  .config(['$provide', Decorate]);

  function Decorate($provide) {
    $provide.decorator('alertDirective', function($delegate) {
      var directive = $delegate[0];

      directive.templateUrl = "alertOverride.tpl.html";

      return $delegate;
    });
  }

Gabel von pkozlowski.opensource plunkr: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview

(Beachten Sie, dass Sie das Suffix 'Direktive' an den zu dekorierenden Direktivennamen anhängen müssen. Oben dekorieren wir die alert-Direktive von UI Bootstrap, daher verwenden wir den Namen alertDirective.)

Da Sie häufig mehr als nur das templateUrl überschreiben möchten, ist dies ein guter Ausgangspunkt, um die Direktive weiter zu erweitern, z. B. durch Überschreiben/Umbrechen des Links oder der Kompilierungsfunktion ( z Beispiel ).

79
JcT

Die Antwort von pkozlowski.opensource ist wirklich nützlich und hat mir sehr geholfen! Ich habe es in meinem Zustand optimiert, eine einzige Datei zu haben, die alle meine angular Template-Overrides definiert, und die externe JS geladen, um die Nutzlastgröße niedrig zu halten.

Gehen Sie dazu zum Ende der angular UI-Bootstrap-Quell-JS-Datei (z. B. ui-bootstrap-tpls-0.6.0.js) und suchen Sie die Vorlage, die Sie interessiert. Kopieren Sie den gesamten Block, der die Vorlage definiert, und fügen Sie ihn in Ihre JS-Überschreibungsdatei ein.

z.B.

angular.module("template/alert/alert.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/alert/alert.html",
     "      <div class='alert' ng-class='type && \"alert-\" + type'>\n" +
     "          <button ng-show='closeable' type='button' class='close' ng-click='close()'>Close</button>\n" +
     "          <div ng-transclude></div>\n" +
     "      </div>");
}]);

Fügen Sie dann einfach Ihre Overrides-Datei nach ui-bootstrap hinzu und Sie erzielen das gleiche Ergebnis.

Gefälschte Version von pkozlowski.opensource 's Plunk http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview

27
Matt Byrne

Sie können template-url="/app/.../_something.template.html", um die aktuelle Vorlage für diese Anweisung zu überschreiben.

(Funktioniert mit Akkordeon Bootstrap mindestens.)

7
crimson