คุณสามารถแทนที่เทมเพลตเฉพาะใน AngularUI Bootstrap ได้หรือไม่?

Question 1

ฉันอยากรู้ว่ามีวิธีลบล้างเทมเพลตเฉพาะจากไฟล์ ui-bootstrap-tpls หรือไม่ เทมเพลตเริ่มต้นส่วนใหญ่เหมาะกับความต้องการของฉัน แต่มีเทมเพลตที่เฉพาะเจาะจงสองสามรายการที่ฉันต้องการแทนที่โดยไม่ต้องผ่านขั้นตอนทั้งหมดในการคว้าเทมเพลตเริ่มต้นทั้งหมดและเชื่อมต่อกับเวอร์ชันที่ไม่ใช่ tpls

Question 2

ใช่คำสั่งจาก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

Question 3

การใช้ `$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;
    });
  }

ส้อมของpkozlowski.opensourceของ plunkr: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview

(โปรดทราบว่าคุณต้องต่อท้ายคำสั่ง "คำสั่ง" ต่อท้ายชื่อคำสั่งที่คุณต้องการตกแต่งด้านบนเรากำลังตกแต่งalertคำสั่งของ UI Bootstrap ดังนั้นเราจึงใช้ชื่อalertDirectiveนี้)

ในขณะที่คุณมักต้องการทำมากกว่าการลบล้างสิ่งtemplateUrlนี้จึงเป็นจุดเริ่มต้นที่ดีในการขยายคำสั่งเพิ่มเติมเช่นโดยการแทนที่ / ตัดลิงก์หรือฟังก์ชันคอมไพล์ ( เป็นต้น )

Question 4

คำตอบจาก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 's ตีเสียงดังปังhttp://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview

Question 5

คุณสามารถใช้template-url="/app/.../_something.template.html"เพื่อลบล้างเทมเพลตปัจจุบันสำหรับคำสั่งนั้น

(ใช้งานได้ใน Accordion Bootstrap เป็นอย่างน้อย)

คุณสามารถแทนที่เทมเพลตเฉพาะใน AngularUI Bootstrap ได้หรือไม่?

การใช้ $provide.decorator

การใช้ `$provide.decorator`