it-swarm.dev

يمكنك تخطي قوالب محددة في Angular UI Bootstrap؟

أشعر بالفضول إذا كانت هناك طريقة لتجاوز قوالب فردية محددة من ملف ui-bootstrap-tpls. تتلاءم الغالبية العظمى من القوالب الافتراضية مع احتياجاتي ، ولكن هناك عدة قوالب محددة أود استبدالها دون المرور عبر العملية بأكملها للاستيلاء على جميع القوالب الافتراضية والحصول عليها سلكية حتى الإصدار غير المرتبط.

87
Jeremy Privett

نعم ، التوجيهات من http://angular-ui.github.io/bootstrap قابلة للتخصيص بدرجة كبيرة ومن السهل تجاوز أحد القوالب (وما زالت تعتمد على القوالب الافتراضية لتوجيهات أخرى).

يكفي تغذية $templateCache ، إما بتغذيته مباشرةً (كما هو الحال في ملف ui-bootstrap-tpls) أو - ربما أكثر بساطة - تجاوز القالب باستخدام توجيه <script> ( doc ).

يتم عرض مثال مفترض حيث أقوم بتغيير قالب التنبيه للتبديل x لـ Close أدناه:

<!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>

الغطاس المباشر: http://plnkr.co/edit/gyjVMBxa3fToYTFJtnij؟p=preview

121
pkozlowski.opensource

باستخدام $provide.decorator

استخدام $provide لتزيين التوجيه يتجنب الحاجة إلى العبث مباشرة بـ $templateCache.

بدلاً من ذلك ، أنشئ القالب الخارجي html كما تفعل عادةً ، وبأي اسم تريده ، ثم تجاوز التوجيه templateUrl للإشارة إليه.

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

Fork of pkozlowski.opensource 's plunkr: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI؟p=preview

(لاحظ أنه يجب عليك إلحاق لاحقة "التوجيه" باسم التوجيه الذي تنوي تزيينه. أعلاه ، نحن نوفر توجيه alert الخاص بـ UI Bootstrap ، لذلك نستخدم الاسم alertDirective.)

نظرًا لأنك قد ترغب غالبًا في القيام بأكثر من مجرد تجاوز templateUrl ، فهذا يوفر نقطة بداية جيدة لتوسيع نطاق التوجيه ، على سبيل المثال عن طريق تجاوز/التفاف الرابط أو وظيفة التحويل البرمجي ( على سبيل المثال ).

79
JcT

الجواب من pkozlowski.opensource مفيد حقًا وساعدني كثيرًا! قمت بتعديلها في حالتي للحصول على ملف واحد يحدد جميع تخطي القالب الزاوي وتحميل JS الخارجي للحفاظ على حجم الحمولة النافعة.

للقيام بذلك ، انتقل إلى أسفل ملف js المصدر ui-bootstrap الزاوي (على سبيل المثال ، ui-bootstrap-tpls-0.6.0.js) وابحث عن القالب الذي تهتم به. انسخ الكتلة بأكملها التي تحدد القالب والصقه في ملف JS الذي تتخطاه.

مثلا.

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

بعد ذلك فقط قم بتضمين ملف التخطيات الخاص بك بعد ui-bootstrap وتحقق نفس النتيجة.

نسخة متشعبة من pkozlowski.opensource الشرير http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg؟p=preview

27
Matt Byrne

يمكنك استخدام template-url="/app/.../_something.template.html" لتجاوز القالب الحالي لهذا التوجيه.

(يعمل في Accordion Bootstrap على الأقل.)

7
crimson