Pouvez-vous ignorer les modèles spécifiques dans AngularUI Bootstrap?

Je suis curieux de savoir si il existe un moyen de remplacer unique, les modèles spécifiques à partir de l'interface utilisateur-bootstrap-npt fichier. La grande majorité des modèles par défaut l'adapter à mes besoins, mais il ya un couple spécifique de ceux que j'aimerais le remplacer sans passer par tout le processus d'accaparement de tous les modèles par défaut et de les amener filaire jusqu'à la non-npt version.

  • J'ai aussi trouvé moi-même la décoration de la $modal service pour obtenir plus de possibilités de configuration sans (espérons-le) de créer trop d'entretien des maux de tête. $provide.decorator('$modal'... Dans mon cas, je ne voulais pas rendre les modalWindow élément. Jamais. Je n'étais simplement pas l'utiliser, et c'était le mieux que je pouvais venir. J'aimerais entendre une meilleure façon, si quelqu'un en possède un.
InformationsquelleAutor Jeremy Privett | 2013-07-15
  1. 121

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

    C'est assez pour nourrir $templateCache, soit de l'alimenter directement (comme le fait dans la ui-bootstrap-tpls fichier) ou - sans doute plus simple de remplacer un modèle à l'aide de la <script> directive (doc).

    Un exemple artificiel où je vais changer d'alerte du modèle de swap x pour Close est indiqué 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>

    Vivre plunker: http://plnkr.co/edit/gyjVMBxa3fToYTFJtnij?p=preview

    • J'aime cette réponse. Je n'aime pas le fait qu'il n'est pas inclus dans la documentation de la page de l'Angulaire de l'INTERFACE utilisateur et m'a pris du temps à comprendre comment faire quelque chose d'aussi simple que de montrer un modal.
    • De la Documentation et de travail solides exemples sont les deux plus grands inconvénients de Angulaire de l'INTERFACE utilisateur. Le projet est grand, mais il a besoin de quelque doux appel d'offres développeur de l'amour.
    • c'est un angular-js fonctionnalité (pas angular-ui), c'est déjà documentée dans angular js officiel de docs
    • Veuillez vérifier @JcT répondre à environ $fournir.décorateur, comme c'est l'angle moyen (de la bonne façon dans ce cas) pour remplacer la directive de modèles. Et il est assez facile. Juste l'ajout/remplacement d'une modèle à $templateCache n'est pas vraiment la meilleure pratique.
    • Je ne suis pas sûr de l'endroit où vous obtenez des choses "c'est l'angle moyen (de la bonne façon dans ce cas)" et "ajout/remplacement d'une modèle à $templateCache n'est pas vraiment la meilleure pratique", mais comme l'un des angular-ui et angulaire mainteneurs je peux vous assurer qu'il n'y a rien de mal avec prépondérant des modèles. Sauf si vous avez des questions spécifiques à partager...
    • Eh bien, le problème n'est pas sur la substitution des modèles. Est sur le modèle utilisé pour le faire. Dans le "Décorateur" patron, je suis rappelé utilisé dans une autre réponse), pour ce cas précis c'est uniquement sur le remplacement du modèle. La différence est d'environ un modèle qui vous permettra d'état bien défini du point de modification(décoration) une Directive, par opposition à un modèle qui définit un modèle un peu comme "au milieu de nulle part", dont l'id est celui d'un modèle à partir de quelques directives que vous souhaitez modifier. Le premier est très clair sur ce qu'est en train de faire, et je pense que la dernière ne l'est pas.
    • D'où le "juste ajouter/substitution d'un modèle à $templateCache n'est pas vraiment la meilleure pratique" de la déclaration 🙂 je devrais Peut-être changer en: "il suffit d'ajouter/substitution d'un modèle à $templateCache pour modifier une directive n'est pas vraiment la meilleure pratique". Aussi, je vois Angulaire de dollars templateCache aussi exactement que, d'un cache de sorte que le navigateur n'a pas besoin d'en faire la demande à chaque fois est peint, non pas comme une carte pour laquelle vous créez primordial modèle de tendances. C'est là que la phrase "c'est l'angle moyen (de la bonne façon dans ce cas)" vient. Mais bon, j'ai accepter, c'est juste un avis, bien sûr 🙂

    InformationsquelleAutor pkozlowski.opensource
  2. 79

    À l'aide de $provide.decorator

    À l'aide de $fournir pour décorer la directive évite la nécessité d'directement déconner avec $templateCache.

    Au lieu de cela, créer votre template html que vous pourriez normalement, avec le nom que vous s'il vous plaît, puis remplacer la directive templateUrl à point à elle.

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

    Fourche de pkozlowski.opensource's plunkr: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview

    (Notez que vous devez ajouter de la "Directive" suffixe du nom de la directive que vous avez l'intention pour décorer. Ci-dessus, nous sommes décoration UI Bootstrap est alert directive, donc nous utilisons le nom de alertDirective.)

    Que vous voulez faire plus que simplement remplacer le templateUrl, cela fournit un bon point de départ pour prolonger la directive, par exemple en substituant/conditionnement du lien ou de la compilation de la fonction (par exemple).

    • C'est la bonne solution et suit angulaire des meilleures pratiques. Vous ne devez JAMAIS utiliser des chaînes de générer du HTML, vous ne devriez pas avoir à inclure explicitement dans le index.html fichier où vous injecter des scripts tiers. Merci @JcT!
    • Salut, est - alertDirective un mot clé? si oui, quel est le mot clé pour Tabs? Je suis en train de faire la même chose sur les onglets, mais j'ai regardé à travers la alert.js et je ne vois pas où ils avaient alertDirective là.
    • Le angularjs $compileProvider attache une "Directive" suffixe au nom de votre directive lorsque vous vous inscrivez (le $filterProvider fait de même avec un "Filtre" suffixe); pour la plupart des fins, c'est invisible, mais lors de la décoration que vous aurez besoin d'ajouter ce suffixe à la directive-vous l'intention de cible. Par exemple, tabDirective ou tabsetDirective, etc. Pas exactement clairement documenté nulle part que j'ai pu trouver, mais ici, c'est une référence au comportement similaire $filterProvider au moins: docs.angularjs.org/api/ng/provider/$filterProvider
    • Merci beaucoup @JcT, une grande réponse. Ce est la bonne façon de procéder. Et comme tu le dis, un bon point de départ pour la "décoration" de la 3ème partie les directives 🙂
    • La solution a fonctionné pour moi aussi. Est-il possible d'utiliser la valeur par défaut ET modèle personnalisé pour les mêmes Bootstrap directive en vertu de différents modules? Il semble que mon modèle personnalisé remplace toujours la valeur par défaut.
    • cette solution ne fonctionne pas avec angular-ui 1.3.2. voir plunk plnkr.co/modifier/E88IsLodO2a7CvH6gcC6?p=preview
    • Il y avait d'autres sans rapport avec des erreurs dans les débarquez; par exemple, 1.3.2 utilise le préfixe des directives telles que "uib-alerte' au lieu de 'alert' (notez qu'il comprend également les "template-url" prop pour remplacer les modèles). Fixe: plnkr.co/modifier/sIIaTX?p=preview
    • Désolé pour la réponse tardive. Oui, je pense que la config va obtenir assommé; cependant, à partir Angulaire v1.3 je crois que vous pouvez fournir un function(element, attributes) à templateUrl. Vous pouvez l'utiliser pour certains comportement dynamique (retour original templateUrl fonction ou l'url de votre propre chaîne de caractères en fonction d'un attribut, etc). Cependant, l'interface utilisateur.bootstrap maintenant utilise également cette fonctionnalité pour vous permettre de fournir un template-url attribut sur une directive, de sorte que vous pourrait aussi éventuellement utiliser que si vous êtes heureux de fournir le chemin d'accès du modèle directement via la directive attribut d'élément.
    • belle et élégante solution.
    • La meilleure solution, qui fonctionne pour la plupart des cas! Merci

    InformationsquelleAutor JcT
  3. 27

    La réponse de pkozlowski.opensource est vraiment utile et m'a beaucoup aidée! J'ai modifié à ma condition d'avoir un seul fichier de définition de l'ensemble de mes angulaire de modèle de substitutions et chargé de la JS externe pour garder la taille de la charge utile vers le bas.

    Pour ce faire, allez au bas de l'angulaire de l'interface utilisateur-bootstrap source fichier js (par exemple ui-bootstrap-tpls-0.6.0.js) et de trouver le modèle qui vous intéresse. Copiez le bloc entier qui définit le modèle et le coller dans vos remplacements fichier JS.

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

    Alors il suffit d'inclure vos remplacements de fichiers après l'interface de démarrage et vous obtenir le même résultat.

    Fourche version de pkozlowski.opensource's plunk http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview

    • J'utilise ce même modèle, et bien qu'il travaille; j'aimerais vraiment qu'il y a une meilleure façon. Je pense que je préférerais configuration à casser.
    InformationsquelleAutor Matt Byrne
  4. 7

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

    (Travaux en Accordéon Bootstrap au moins.)

    InformationsquelleAutor crimson