AngularUI Bootstrap에서 특정 템플릿을 재정의 할 수 있습니까?
ui-bootstrap-tpls 파일에서 하나의 특정 템플릿을 재정의하는 방법이 있는지 궁금합니다. 대부분의 기본 템플릿은 내 요구에 맞지만 모든 기본 템플릿을 가져 와서 비 tpls 버전에 연결하는 전체 프로세스를 거치지 않고 교체하고 싶은 몇 가지 특정 템플릿이 있습니다.
예, 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
사용 $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
(Note that you must append the 'Directive' suffix to the directive name you intend to decorate. Above, we're decorating UI Bootstrap's alert directive, so we use the name alertDirective.)
As you may often want to do more than just override the templateUrl, this provides a good starting point from which to further extend the directive, for example by overriding/wrapping the link or compile function (for example).
The answer from pkozlowski.opensource is really useful and helped me out a lot! I tweaked it in my condition to have a single file defining all of my angular template overrides and loaded the external JS to keep payload size down.
To do this, go to the bottom of the angular ui-bootstrap source js file (e.g. ui-bootstrap-tpls-0.6.0.js) and find the template you are interested in. Copy the entire block that defines the template and paste it into your overrides JS file.
e.g.
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>");
}]);
Then just include your overrides file after ui-bootstrap and you achieve the same result.
Forked version of pkozlowski.opensource's plunk http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview
You can use template-url="/app/.../_something.template.html" to override the current template for that directive.
(Works in Accordion Bootstrap at least.)
'programing tip' 카테고리의 다른 글
| memset () 반환 값의 용도는 무엇입니까? (0) | 2020.09.12 |
|---|---|
| '@objc'가 아닌 방법은 '@objc'프로토콜의 선택적 요구 사항을 충족하지 않습니다. (0) | 2020.09.12 |
| 새로 고침시 자동 브라우저 스크롤 방지 (0) | 2020.09.11 |
| 고양이의 쓸데없는 사용? (0) | 2020.09.11 |
| boto를 사용하여 S3 버킷의 디렉터리에 파일을 업로드하는 방법 (0) | 2020.09.11 |