Angular에서 특정 템플릿을 재정의할 수 있습니까?UI 부트스트랩?
ui-bootstrap-tpls 파일에서 특정 단일 템플릿을 덮어쓸 방법이 있는지 궁금합니다.대부분의 기본 템플릿은 제 요구에 맞지만, 기본 템플릿을 모두 가져와 비태플 버전에 연결하는 전체 프로세스를 거치지 않고 몇 가지 특정 템플릿을 교체하고 싶습니다.
네, http://angular-ui.github.io/bootstrap의 디렉티브는 커스터마이즈성이 뛰어나 템플릿 중 하나를 덮어쓰기가 쉽습니다(다른 디렉티브는 기본 디렉티브에 의존합니다).
먹이로 충분하다$templateCache직접 공급하거나(에서와 같이)ui-bootstrap-tplsfile) 또는 (아마도 더 단순할 것입니다)를 사용하여 템플릿을 덮어씁니다.<script>directive(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
를 사용하여 디렉티브를 장식함으로써 직접 조작할 필요가 없어집니다.$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.forksource의 plunkr : http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview
(데코하려는 디렉티브 이름에 'Directive' 접미사를 추가해야 합니다.위에서는 UI 부트스트랩의alertdirective를 사용하기 때문에alertDirective.)
많은 경우, 이 기능을 단순히 덮어쓰는 것 이상의 작업을 하고 싶으실 수 있습니다.templateUrl이를 통해 링크나 컴파일 함수(예를 들어)를 덮어쓰기/삭제함으로써 디렉티브를 더욱 확장하기 위한 적절한 출발점이 됩니다.
pkozlowski.opensource의 답변은 매우 유용하고 많은 도움이 되었습니다!모든 각도 템플릿 오버라이드를 정의하는 단일 파일을 가지도록 조건을 조정하고 페이로드 크기를 줄이기 위해 외부 JS를 로드했습니다.
이를 수행하려면 angular ui-bootstrap source 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.forksource의 plunk http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview의 。
하시면 됩니다.template-url="/app/.../_something.template.html"해당 디렉티브의 현재 템플릿을 덮어씁니다.
(적어도 아코디언 부트스트랩에서는 동작합니다).
언급URL : https://stackoverflow.com/questions/17660947/can-you-override-specific-templates-in-angularui-bootstrap
'programing' 카테고리의 다른 글
| angularjs 페이지의 RESTful API에서 서비스에 액세스하는 방법은 무엇입니까? (0) | 2023.04.05 |
|---|---|
| c#에서 동적으로 Json 생성 (0) | 2023.04.05 |
| Oracle 데이터베이스를 사용하는 이유는 무엇입니까? (0) | 2023.04.05 |
| 형식 스크립트를 컴파일할 때 'tsc 명령어를 찾을 수 없습니다' (0) | 2023.04.05 |
| MongoDB 및 "가입" (0) | 2023.04.05 |