Tôi tò mò nếu có cách nào để ghi đè các mẫu cụ thể, đơn lẻ từ tệp ui-bootstrap-tpls. Phần lớn các mẫu mặc định phù hợp với nhu cầu của tôi, nhưng có một số mẫu cụ thể mà tôi muốn thay thế mà không cần trải qua toàn bộ quá trình lấy tất cả các mẫu mặc định và chuyển chúng lên phiên bản không phải tpls.
Câu trả lời:
Có, các lệnh từ http://angular-ui.github.io/bootstrap có khả năng tùy biến cao và rất dễ dàng ghi đè một trong các mẫu (và vẫn dựa vào các mẫu mặc định cho các lệnh khác).
Nó là đủ để cung cấp $templateCache, hoặc cho nó ăn trực tiếp (như được thực hiện trong ui-bootstrap-tplstệp) hoặc - có lẽ đơn giản hơn - ghi đè một mẫu bằng cách sử dụng <script>chỉ thị ( doc ).
Dưới đây là một ví dụ tiếp theo mà tôi đang thay đổi mẫu của cảnh báo để hoán đổi xcho 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>
Trực tiếp plunker: http://plnkr.co/edit/gyjVMBxa3fToYTFJtnij?p=preview
$provide.decoratorSử dụng $provideđể trang trí chỉ thị tránh sự cần thiết phải trực tiếp lộn xộn xung quanh $templateCache.
Thay vào đó, hãy tạo html mẫu bên ngoài của bạn như bình thường, với bất kỳ tên nào bạn muốn và sau đó ghi đè chỉ thị templateUrlđể trỏ vào nó.
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 của pkozlowski.opensource 's plunkr: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview
(Lưu ý rằng bạn phải thêm hậu tố 'Chỉ thị' vào tên chỉ thị mà bạn định trang trí. Ở trên, chúng tôi đang trang trí alertchỉ thị của UI Bootstrap , vì vậy chúng tôi sử dụng tên này alertDirective.)
Vì bạn có thể thường muốn làm nhiều việc hơn là chỉ ghi đè templateUrl, điều này cung cấp một điểm khởi đầu tốt để từ đó mở rộng thêm chỉ thị, ví dụ: bằng cách ghi đè / gói liên kết hoặc hàm biên dịch ( ví dụ ).
alertDirectivemột từ khóa? nếu có, từ khóa là Tabsgì? Tôi đang cố gắng làm điều tương tự trên các tab, nhưng tôi đã xem qua alert.js và không thấy chúng alertDirectiveở đâu trong đó.
$compileProvidergắn hậu tố 'Chỉ thị' vào tên chỉ thị của bạn khi bạn đăng ký nó ( $filterProvidertương tự với hậu tố 'Bộ lọc'); đối với hầu hết các mục đích, điều này là vô hình, nhưng khi trang trí, bạn sẽ cần thêm hậu tố này vào chỉ thị mà bạn định nhắm mục tiêu. Ví dụ: tabDirectivehoặc tabsetDirective, v.v. Không được ghi lại chính xác ở bất kỳ đâu mà tôi có thể tìm thấy, nhưng đây là tham chiếu đến hành vi tương tự cho $filterProviderít nhất: docs.angularjs.org/api/ng/provider/$filterProvider
function(element, attributes)cho templateUrl. Bạn có thể sử dụng điều này cho một số hành vi động (trả về hàm templateUrl gốc hoặc chuỗi url của riêng bạn tùy thuộc vào thuộc tính, v.v.). Tuy nhiên, ui.bootstrap hiện cũng sử dụng chức năng tương tự này để cho phép bạn cung cấp một template-urlthuộc tính trên một chỉ thị, vì vậy bạn cũng có thể sử dụng nó nếu bạn sẵn sàng cung cấp trực tiếp đường dẫn mẫu thông qua thuộc tính phần tử chỉ thị.
Câu trả lời từ pkozlowski.opensource thực sự hữu ích và đã giúp tôi rất nhiều! Tôi đã điều chỉnh nó trong điều kiện của mình để có một tệp xác định tất cả các ghi đè mẫu góc cạnh của tôi và tải JS bên ngoài để giảm kích thước tải xuống.
Để thực hiện việc này, hãy chuyển đến cuối tệp js nguồn ui-bootstrap góc cạnh (ví dụ ui-bootstrap-tpls-0.6.0.js) và tìm mẫu bạn quan tâm. Sao chép toàn bộ khối xác định mẫu và dán vào tệp JS ghi đè của bạn.
ví dụ
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>");
}]);
Sau đó, chỉ cần bao gồm tệp ghi đè của bạn sau ui-bootstrap và bạn đạt được kết quả tương tự.
Phiên bản Forked của pkozlowski.opensource 's liệng http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview
$modaldịch vụ để có thêm khả năng cấu hình mà không (hy vọng) tạo ra quá nhiều đau đầu về bảo trì.$provide.decorator('$modal'... Trong trường hợp của tôi, tôi không muốn hiển thịmodalWindowphần tử. Không bao giờ. Tôi chỉ là không sử dụng nó, và đây là điều tốt nhất tôi có thể nghĩ ra. Tôi muốn nghe một cách tốt hơn nếu ai đó có nó.