각도 UI 부트스트랩 지시어 템플릿이 없습니다.
나는 현재 각진 검사를 하고 있다.bootstrap-UI로컬로 사용할 수 있습니다.아코디언과 대화상자의 예를 재현하려고 하면.콘솔에 템플릿이 없다는 오류 메시지가 나타납니다.
오류 예: 404 Not Found - localhost/angular/template/message.html
제가 봤을 때ui-bootstrap-0.1.0.js지시문에는 템플릿이 있습니다.URL.
의 목적은 무엇입니까?templateURL지시할 수 있나요?
그 템플릿은 내가 전체 앵글을 다운로드 할 때 포함되어야 하나요?bootstrap-UIzip 파일?
헤더에 포함해야 할 다른 파일이 누락되어 있습니까?
<link rel="stylesheet" href="includes/css/bootstrap.css">
<script src="includes/js/angular.js"></script>
<script src="includes/js/ui-bootstrap-0.1.0.js"></script>
다음 두 가지 선택지가 있습니다.
독자적인 템플릿을 작성하지 않고 빌트인을 원하는 경우
ui-bootstrap-tpls-0.1.0.jsfile - 모든 템플릿이 삽입되어 앱에 사전 등록됩니다.https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.1.0.js#L1322독자적인 템플릿을 작성하려면
templatesangular-ui/bootstrap 프로젝트에서 템플릿을 다운로드합니다.그런 다음 사용자 정의할 항목을 덮어씁니다.
자세한 내용은 이쪽:https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files
편집:
또한 Bootstrap-tpls.js를 다운로드하고 Angular를 사용하여 디렉티브의 templateUrl 중 일부를 자신의 것으로 덮어쓸 수도 있습니다.지시문의 templateUrl을 변경하는 JS 데코레이터.다음은 변경 날짜 선택자의 templateUrl의 예입니다.
http://docs.angularjs.org/api/AUTO.$provide#methods_decorator
myApp.config(function($provide) {
$provide.decorator('datepickerDirective', function($delegate) {
//we now get an array of all the datepickerDirectives,
//and use the first one
$delegate[0].templateUrl = 'my/template/url.html';
return $delegate;
});
});
이 문제로 2시간을 허비하고 난 후 내 5센트.다음 작업을 수행해야 합니다.
- http://angular-ui.github.io/bootstrap/ 에 접속합니다.[ Create Custom Build ]를 클릭하여 사용할 기능을 선택합니다.(1개의 아이템에 60k를 당기는 것은 의미가 없습니다).
- 포함하다
custom.tpls.js내 경우는 그랬다ui-bootstrap-custom-0.10.0.min.js - Angular 모듈에는 다음이 포함됩니다.
'ui.bootstrap.yourfeature'내 경우는 그랬다'ui.bootstrap.modal' 또,
'ui.bootstrap.tpls'모듈의 완전한 디퍼시티는 다음과 같습니다.var profile = angular.module("profile",[ 'ui.bootstrap.modal', 'ui.bootstrap.tpls' ]);- 2시간 절약해서 행복하세요 :-)
이 에러 메세지는, 다음의 다른 시나리오에서도 발생하는 것 같습니다.http://plnkr.co/edit/aix6PZ?p=preview
모듈 의존성을 'ui'로만 명시하는 경우.'ui.bootstrap' 대신 bootstrap.dialog'가 angular에서 템플릿을 찾을 수 없습니다.
다음은 '왜'에 대한 공식 설명입니다.https://github.com/angular-ui/bootstrap/issues/266
index.html에는 두 개의 필수 스크립트가 정의되어 있습니다만, 같은 에러가 발생하고 있었습니다.마지막으로 ui-bootstrap.js 스크립트를 먼저 로드하고 ui-bootstrap-tpls.js 스크립트를 이렇게 설정하여 로드 순서를 변경하였습니다.이것으로 문제가 해결되었습니다.그러나 나중에 (위의 코멘트와 같이) 하나의 lib만 필요하다는 것을 알게 되었습니다.그래서 ui-bootstrap.js를 삭제했습니다.
문제는 HTML에 template-url이 아직 포함되어 있다는 것입니다.
<div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">
이로 인해 브라우저가 멈춰 버렸습니다.이상하지만 원래 그랬어요.
요약하면, 내가 한 일은:
bower install bootstrap --save
bower install angular-bootstrap --save
my index.html(-tpls에 주의):
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
그러면 Angular 앱에서:
angular
.module('myApp', ['ui.bootstrap'])
그런 다음 HTML에서 template-url을 삭제합니다.
<div uib-accordion-group class="panel-default" heading="Custom template">
쾅, 작동한다.
이 문제의 원인은 인정된 답변이지만, 이 문제의 다른 원인 중 하나는 제가 우연히 마주친 문제이기 때문에 다른 사람이 같은 문제의 2차적인 원인을 발견했을 경우에 대비하여 게시하고 싶었습니다.
증상은 부트스트랩 템플릿에서 404로 완전히 동일하지만, 제 경우 실제로 'ui-bootstrap-tpls.min.js' javascript 파일을 포함했습니다.문제는 템플릿 이외의 버전인 'ui-bootstrap.min.js'도 포함시켰다는 것입니다.일단 둘 다 포함되고, 순서가 중요하다고 생각되면, 한쪽이 다른 한쪽을 대체할 것입니다.제 경우 템플릿 버전이 아닌 다른 버전이 템플릿 버전을 대체하여 404 문제가 발생하였습니다.
일단 'ui-bootstrap-tpls.min.js'만 포함하도록 확인해보니 모두 예상대로 작동했습니다.
댓글을 읽고 어제 밤 10시간 동안 쌓은 경험을 더해야겠어요.UI 부트스트랩을 피하세요.그것의 가치보다 훨씬 더 힘이 드는 것 같습니다.
또, 레포의 문제나 코멘트를 읽어 보면, 프로젝트의 진행 방식 전체가, 사용하기 쉬운 툴과 상충하는 것 같습니다.좋은 의도로 시작했다고 확신하지만, 가능하면 피해야 할 모듈일지도 모릅니다.
물론 이것이 의견이라는 경고도 있지만, 다른 사람들도 같은 생각을 하는지 알 수 있을 것이다.
언급URL : https://stackoverflow.com/questions/14961498/angular-ui-bootstrap-directive-template-missing
'source' 카테고리의 다른 글
| 봄의 최대(클라이언트 요청) 스레드 풀 크기 (0) | 2023.02.26 |
|---|---|
| Angular 사용법새 페이지가 요청될 때 JS가 Express(Node.js)를 사용하여 라우팅합니까? (0) | 2023.02.26 |
| Wordpress의 무한 스크롤과 함께 작동하지 않는 소셜 아이콘 (0) | 2023.02.26 |
| JSON.stringify와 JSON.parse의 차이점 (0) | 2023.02.26 |
| \xc2 문자 또는 코드 스니펫을 피하는 방법 (0) | 2023.02.26 |