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
(디렉티브 이름에 '디렉티브'접미사를 추가해야합니다. 위에서 UI 부트 스트랩의 alert디렉티브를 꾸미기 때문에라는 이름을 사용합니다 alertDirective.)
당신은 종종 단지를 오버라이드 (override)보다 수행 할 수 있습니다으로 templateUrl, 이것은 좋은 추가 / 무시 링크 또는 (컴파일 기능을 감싸서 예를 들어, 지시어를 확장 할 수있는 출발점 제공 예를 들어 ).
alertDirective키워드입니까? 그렇다면 키워드는 Tabs무엇입니까? 탭에서 비슷한 일을하려고하는데 alert.js를 살펴 봤는데 alertDirective거기에 어디에 있었는지 모르겠습니다 .
$compileProvider는 등록 할 때 지시문의 이름에 '지시문'접미사를 추가합니다 ( $filterProvider'필터'접미사와 유사하게 수행됨 ). 대부분의 경우 이것은 보이지 않지만 장식 할 때 대상으로 지정하려는 지시문에이 접미사를 추가해야합니다. 예를 들어, tabDirective또는 tabsetDirective등. 내가 찾을 수있는 모든 곳에서 정확하게 문서화되지는 않았지만 $filterProvider최소한 유사한 동작에 대한 참조는 다음과 같습니다. docs.angularjs.org/api/ng/provider/$filterProvider
function(element, attributes)templateUrl에 a 를 제공 할 수 있다고 생각합니다 . 일부 동적 동작에 사용할 수 있습니다 (원래 templateUrl 함수 또는 속성에 따라 고유 한 URL 문자열 반환 등). 그러나 ui.bootstrap은 이제 이와 동일한 기능을 사용 template-url하여 지시문에 속성을 제공 할 수 있으므로 지시문 요소 속성을 통해 직접 템플릿 경로를 제공하고 싶은 경우에도 잠재적으로 사용할 수 있습니다.
pkozlowski.opensource 의 답변 은 정말 유용하고 많은 도움이되었습니다! 모든 각도 템플릿 재정의를 정의하는 단일 파일을 갖도록 조건에서 조정하고 페이로드 크기를 줄이기 위해 외부 JS를로드했습니다.
이렇게하려면 각진 ui-bootstrap 소스 js 파일 (예 :)의 맨 아래로 이동하여 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
$modal너무 많은 유지 관리 문제를 일으키지 않고 더 많은 구성 가능성을 얻기 위해 서비스를 장식하고 있음을 발견했습니다 .$provide.decorator('$modal'... 제 경우에는modalWindow요소 를 렌더링하고 싶지 않았습니다 . 이제까지. 나는 그것을 사용하지 않았고 이것이 내가 생각할 수있는 최선의 방법이었습니다. 누군가 가지고 있다면 더 나은 방법을 듣고 싶습니다.