web-dev-qa-db-fra.com

Pouvez-vous remplacer des modèles spécifiques dans Angular UI Bootstrap?

Je suis curieux de savoir s'il existe un moyen de remplacer des modèles uniques et spécifiques du fichier ui-bootstrap-tpls. La grande majorité des modèles par défaut répondent à mes besoins, mais il y en a quelques-uns que je voudrais remplacer sans passer par tout le processus de récupération de tous les modèles par défaut et de les obtenir câblés à la version non-tpls.

angularjsangular-uiangular-ui-bootstrap
87
Jeremy Privett

Oui, les directives de http://angular-ui.github.io/bootstrap sont hautement personnalisables et il est facile de remplacer l'un des modèles (et de continuer à utiliser les modèles par défaut pour les autres directives).

Il suffit de nourrir $templateCache, soit en l’alimentant directement (comme dans le ui-bootstrap-tpls fichier) ou - probablement plus simple - remplacer un modèle à l’aide du fichier <script> directive ( doc ).

Un exemple artificiel où je change le modèle d'alerte pour échanger x contre Close est présenté ci-dessous:

<!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
pkozlowski.opensource

En utilisant $provide.decorator

En utilisant $provide pour décorer la directive, évite d'avoir à jouer directement avec $templateCache.

Au lieu de cela, créez votre modèle externe HTML comme vous le feriez normalement, avec le nom de votre choix, puis substituez-y le templateUrl de la directive.

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;
    });
  }

Fourchette de de pkozlowski.opensource : http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview

(Notez que vous devez annexer le suffixe 'Directive' au nom de la directive que vous souhaitez décorer. Ci-dessus, nous décorerons la directive alert de Bootstrap de l'interface utilisateur, nous allons donc utiliser le nom alertDirective.)

Comme vous pouvez souvent vouloir faire plus que simplement écraser templateUrl, ceci fournit un bon point de départ pour étendre davantage la directive, par exemple en surchargeant/encapsulant le lien ou la fonction de compilation ( pour exemple ).

79
JcT

La réponse de pkozlowski.opensource est vraiment utile et m'a beaucoup aidé! Je l'ai modifié dans ma condition pour avoir un seul fichier définissant tous mes angular) remplaçant et chargé le JS externe pour réduire la taille de la charge utile.

Pour ce faire, allez au bas du fichier js source angular ui-bootstrap) (par exemple, ui-bootstrap-tpls-0.6.0.js) et recherchez le modèle qui vous intéresse. Copiez le bloc entier qui définit le modèle et collez-le dans votre fichier JS de substitution.

par exemple.

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>");
}]);

Ensuite, incluez simplement votre fichier de remplacement après ui-bootstrap et vous obtiendrez le même résultat.

Version forkée de de pkozlowski.opensource http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview

27
Matt Byrne

Vous pouvez utiliser template-url="/app/.../_something.template.html" pour remplacer le modèle actuel de cette directive.

(Fonctionne à l'accordéon Bootstrap au moins.)

7
crimson